Не могу аполнить div фотографиями

Нужно расположить фотографии красивой masonry кладкой внутри колонки а затем сделать так, чтобы фотографии заполняли всю ширину этой самой колонки.

Плагины:
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/imagesloaded.min.js"></script>
<script src="../js/imagefill.js"></script>
<script src="../js/masonry.pkgd.min.js"></script>
<style>
    .outBox {
        border: 1px solid black;
        background-color: hotpink;
    }
</style>
<!--
    <div class="container-fluid">
        <div class="center-block col-sm-6">
            <div class="masonry-photo-container outBox">
                <img src="https://pp.vk.me/c628319/v628319389/2e2e8/fdduYBtno8U.jpg" class="masonry-photo-item" width="200" alt="">
                <img src="https://pp.vk.me/c630225/v630225389/34d98/0_P9dNP8Y9Q.jpg" class="masonry-photo-item" width="200" alt="">
                <img src="https://pp.vk.me/c626128/v626128052/1630e/xeZwzSpCiEQ.jpg" class="masonry-photo-item" width="200" alt="">
                <img src="https://pp.vk.me/c604327/v604327235/1f0fb/LkrMmBVha3o.jpg" class="masonry-photo-item" width="200" alt="">
            </div>
        </div>
        <div class="center-block col-sm-6"><div class="outBox"></div></div>
    </div>
-->
<div class="container-fluid">
    <div class="col-sm-6">
        <div class="masonry-photo-container outBox">
            <div class="masonry-photo-item"><img src="https://pp.vk.me/c628319/v6283изображениеm/fdduYBtno8U.jpg" width="300" alt=""></div>
            <div class="masonry-photo-item"><img src="https://pp.vk.me/c630225/v630изображениеmNP8Y9Q.jpg" width="300" alt=""></div>
            <div class="masonry-photo-item"><img src="https://pp.vk.me/c626128/vизображениеmZwzSpCiEQ.jpg" width="300" alt=""></div>
            <div class="masonry-photo-item"><img src="https://pp.vk.me/c6043изображениеmBVha3o.jpg" width="300" alt=""></div>
        </div>
    </div>
    <div class="col-sm-6"><div class="outBox"></div></div>
</div>

Скрипт, который все строит

$(document).imagesLoaded( function() {
    var $container = $(".masonry-photo-container");
    $container.masonry({
    columnWidth: ".masonry-photo-item",
    itemSelector: ".masonry-photo-item"
    });
    //Единственное более или менее работающая строка которая должна отвечать за imagefill - последняя. Остальные чисто показать, какие еще варианты пробовал.
    //$('.masonry-photo-item').imagefill();
    //$('.masonry-photo-container').imagefill({runOnce:true});
    //$('.masonry-photo-container').imagefill({runOnce:true});
    $('.masonry-photo-container').imagefill();
});

Теперь вывод. Порядок изображений таков:

1. Первый кусок html кода (который в ) + masonry.
2. Первый кусок html кода (который в ) + masonry + imagefill.
3. Второй кусок html кода + masonry.
4. Второй кусок html кода + masonry + imagefill.

Заранее спасибо!