Кирпичная кладка НЕ ​​заполняет небольшие ПРОБЕЛЫ

ДЕМО

ПОЛНОЭКРАННАЯ ДЕМО

Кирпичная кладка не заполняет небольшие щели, даже если есть место.

Пример: ширина основного контейнера: 896 пикселей;

рядом с первым контейнером с оранжевым фоном есть пробел, где Masonry может добавить еще один контейнер (второй контейнер Orange BG), чего не происходит. Я не уверен, где я не прав. :-(

Вам нужно развернуть окно, чтобы увидеть проблему.

JS:

jQuery(window).load(function() {
            /* var container = document.querySelector('.masonry-container');
            var msnry = new Masonry(container, {
                itemSelector: '.itemMas',
                columnWidth: 15,
                gutter: 1,
                isFitWidth: true
            }); 
             */
            $ = jQuery;
                var $container = $('.masonry-container').masonry();
                var msnry;
                $container.imagesLoaded( function(){
                    msnry = new Masonry( $container[0], {
                        itemSelector : '.itemMas',

                        isAnimated: true,
                        isFitWidth: true
                    });
                })
         }); 

person React Developer    schedule 10.04.2015    source источник


Ответы (2)


Masonry не изменит порядок элементов в документе. Он просто упаковывает элементы слева направо настолько плотно, насколько это возможно.

Если вам нужно упаковать элементы, изменив их расположение, вы можете использовать другую библиотеку, например Isotope (созданную того же автора). В нем есть режим упаковки в корзину, в котором элементы можно переупорядочивать, чтобы заполнить пробелы.

person Interrobang    schedule 10.04.2015
comment
Спасибо, мы не можем сделать это в библиотеке :-) - person React Developer; 10.04.2015

Спасибо, что сообщили об этой проблеме. Так работает масонство. Это может оставить пробелы. Вам следует взглянуть на Packery, который был специально разработан для заполнения пробелов.

person desandro    schedule 10.04.2015