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

Question

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

如您所见，我有一些项目占据了水平 space 的 50% ("item") 和 1 个项目占据了 100% ("item double")。项目的高度可能会有所不同，但不会显着。

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


$(window).load( function() {

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

});

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

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

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

Answer 1

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

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

JQuery Masonry better optimize whitespaces by changing the order of items

jquery

jquery-masonry

masonry