JQuery Masonry通过改变项目的顺序来更好地优化空白

Question

我目前正在使用以下代码：JSFIDDLE

正如您所看到的，我有一些项目占据了水平空间的50％（“项目”）和1项占据100％的项目（“项目双倍”）。物品的高度可能会有所不同，但不会很大。

.item { width: 50%; }
.item.double { width: 100%; }


$(window).load( function() {

    $container = $('#container');
    $container.masonry({
        "itemSelector": ".item",
        "columnWidth": ".grid-sizer",
        "transitionDuration": 0
    });

});

不幸的是，根据项目的顺序和两列布局（这是我的媒体查询案例之一），空白区域可能很大并且占用了可用空间的一半。

无论如何使用JQuery Masonry解决这个问题还是我必须求助于Isotope（或自定义代码）？修复只会进行必要的重新排列，尽可能保持原始顺序。

我研究了砌体选项和相关的Stackoverflow问题，但我还没有找到解决方案。

Answer 1

实际上可以扩展砌体以重新排列项目序列，但我最终选择了Isotope packery layout。媒体查询触发得很好，我使用Masonry脚本遇到了麻烦。看起来我仍然需要将一些“填充”项混合到.isotope元素中，以避免在中间列中弹出的空格。如果有人遇到过这个问题，那么值得选择Isotope而不是Masonry包，还有更多的选择，即使它附带商业许可证。