Динамическая ширина столбца, вызывающая сложенные изображения в Masonry

Я пытаюсь воссоздать представление блога masonry из Unify в Rails 4. http://htmlstream.com/preview/unify-v1.8/blog_masonry_3col.html

Я купил тему и включил последние файлы imagesLoaded и Masonry в свое приложение (используя Bower-Rails).

• Кладка УПАКОВАННАЯ v3.3.2
• изображения Загружено УПАКОВАННО v3.2.0

При использовании файла js, поставляемого с темой, все изображения располагаются друг над другом.

скриншот 1

$(document).ready(function(){
    var $container = $('.grid-boxes');

    var gutter = 30;
    var min_width = 300;
    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.grid-boxes-in',
            gutterWidth: gutter,
            isAnimated: true,
              columnWidth: function( containerWidth ) {
                var box_width = (((containerWidth - 2*gutter)/3) | 0) ;

                if (box_width < min_width) {
                    box_width = (((containerWidth - gutter)/2) | 0);
                }

                if (box_width < min_width) {
                    box_width = containerWidth;
                }

                $('.grid-boxes-in').width(box_width);

                return box_width;
              }
        });
    });
});

См. эту скрипту js: http://jsfiddle.net/sdynfq83/

Я заметил следующие вещи:

• Изменение размера окна или обновление не решают проблему, поэтому я понял, что это не ошибка загрузки изображений. Мне потребовалось много времени, чтобы понять это.
• Мой HTML-код выглядит нормально, поскольку у меня возникают те же проблемы, если я копирую HTML-код из самой темы и включаю те же файлы JS и CSS.
• поля ".grid-boxes-quote" не имеют такой же ширины, как другие поля сетки. Что странно, потому что все они должны быть одинаковыми, поскольку все ящики имеют класс «.grid-boxes-in». https://jsfiddle.net/sdynfq83/embedded/result/

При удалении кода columnWidth и замене его фиксированным числом (300) + добавление ширины к сетке-полям, кажется, что это работает. Это не то, что мне нужно, поскольку размеры изображений не правильно больше.

css

.blog_masonry_3col .grid-boxes-in {
    padding: 0;
    margin-bottom: 30px;
    border: solid 1px #eee;
    /* added width */
    width: 300px;

}

js

$(document).ready(function(){
    var $container = $('.grid-boxes');

    var gutter = 30;
    var min_width = 300;
    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.grid-boxes-in',
            gutterWidth: gutter,
            isAnimated: true,
              /*columnWidth: function( containerWidth ) {
                var box_width = (((containerWidth - 2*gutter)/3) | 0) ;

                if (box_width < min_width) {
                    box_width = (((containerWidth - gutter)/2) | 0);
                }

                if (box_width < min_width) {
                    box_width = containerWidth;
                }

                $('.grid-boxes-in').width(box_width);

                return box_width;
              }*/
            columnWidth: 300
        });
    });
});

скрипт js: http://jsfiddle.net/8c0r06a6/2/

Сама тема содержит более старую версию masonry, в которой код работает. Изображения продолжают перекрываться (это можно исправить, изменив размер или обновив окно).

Скриншот 2 скриншот 3

Однако я хочу обновить до последней версии каменной кладки и загруженных изображений, чтобы я мог продолжать использовать Bower для легкого обновления этих файлов. Я также надеюсь, что использование последней версии всего исправит перекрывающиеся изображения на снимке экрана 2. Ниже у меня есть работающая скрипта JS со старым кодом.

/**
 * jQuery Masonry v2.1.05
 * A dynamic layout plugin for jQuery
 * The flip-side of CSS Floats
 * http://masonry.desandro.com
 *
 * Licensed under the MIT license.

http://jsfiddle.net/ytLf3bue/1/

Подводя итог, у меня есть следующие вопросы, пожалуйста, имейте в виду, что я начинающий программист-любитель и у меня нет большого опыта работы с JS:

1. Разумно ли всегда использовать последнюю версию кода Masonry и ImagesLoaded, или мне следует просто придерживаться поставляемых файлов?
2. Если 1. да => как мне исправить код, чтобы изображения больше не накладывались друг на друга?
3. Если 1. нет => как мне исправить код, чтобы перекрывающиеся изображения и фоновое кровотечение на скриншотах 2 и 3 исчезли?