javascript - masonry 并没有填补小的空白

Question

DEMO

FULL Screen DEMO

即使有空间， masonry 也不会填补小缝隙。

例子:主容器宽度:896px；

在具有橙色背景的第一个容器旁边，有一个空隙，Masonry 可以在其中添加一个容器(Orange BG 第二个容器)，但这并没有发生。我不确定我哪里错了。 :-(

您需要最大化窗 Eloquent 能看到问题。

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
                    });
                })
         }); 

Answer 1

Masonry 不会改变文档中元素的顺序。它只是尽可能紧密地从左到右打包元素。

如果您需要通过重新排列布局来打包项目，您需要使用另一个库，例如 Isotope (由同一作者制作)。它具有 bin-packing mode其中的项目可以重新排列以适应空白。