Dynamic ColumnWidth вызывая сложенных изображения в масонстве

Question

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

Я купил эту тему и включил последнюю imagesLoaded и кладочные файлы внутри моего приложения (с помощью bower- рельсы).

• Кладка PACKAGED v3.3.2
• imagesLoaded PACKAGED 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/

Тема сами поставляет старую версию кладки. В котором код работает. Изображения сохраняют перекрытие (этот может фиксироваться путем изменения размера или обновления окна).

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

Я же хочу, чтобы обновить его до последней версии кладки и изображения, загруженного таким образом я могу продолжать использовать беседку легко обновлять эти файлы. Я также надеюсь, что использование последней версии всего исправляет перекрывающиеся изображения на скриншоте 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. Является ли это умный Идея всегда использовать последнюю версию кода масонства и изображенийLoaded, или я должен просто придерживаться прилагаемых файлов?
2. Если 1. есть yes => как я могу исправить код, чтобы изображения не были сложены друг на друга?
3. Если 1. нет => как я могу исправить код, чтобы совпадающие изображения и фоновое кровотечение на снимках экрана 2 и 3 исчезли?

Answer 1

Давид Десандро сам ответил мне. не

$(document).ready(function() { 
    // init Masonry after all images have loaded 
    var $grid = $('.grid').imagesLoaded(function() { 
    $grid.masonry({ 
     itemSelector: '.grid-item', 
     percentPosition: true, 
     gutter: 20, 
     columnWidth: '.grid-sizer' 
    }); 
    }); 

}); 

В Кирпичных v3, ColumnWidth больше не принимает функцию. Вместо этого используйте размер элемента для гибких макетов.

Вот демо http://codepen.io/desandro/pen/f3451d70f80c35812b33956785ee152c/

Это устраняет проблему.

Answer 2

В любое время вы имеете дело с кладкой, вместо использования:

$(document).ready(function(){ ... go masonry ... } 

использование:

$(window).load(function(){ ... go masonry ... } 

http://jsfiddle.net/sdynfq83/2/

$ (документ) .ready срабатывает, как только DOM полностью загружен. Это не включает загрузку таких ресурсов, как изображения. Масонство рассчитывает абсолютное позиционирование изображений на основе их ширины и высоты. Если он запускается до загрузки фактического изображения, он видит тег изображения как элемент с нулевой шириной и высотой. Там для него только смещения для желоба между ними и изображения в конечном итоге сложены.

$ (window) .load триггеры после завершения загрузки всех страниц. Это позволяет масонству получить правильные размеры всех объектов, прежде чем попытаться их разместить.