同位素砌体 - 显示内容错误答案

【问题标题】：Isotope masonry - displays content wrong同位素砌体 - 显示内容错误
【发布时间】：2015-03-28 23:08:15
【问题描述】：

我的砌体布局有问题 - 我无法在一行中正确放置 64% 和 32% 的列..

jsfiddle 代码：http://jsfiddle.net/h6ammhbo/

这是我的砌体代码：

var $container = $('#masonry-container').imagesLoaded(function () {
        $container.isotope({
            // options
            itemSelector: '.item_article',
            layoutMode: 'fitRows',
            masonry: {
                gutter: 5
            }
        });
    });

和布局：

我的CSS：大件物品：.article_60{ width: 64% } 小件物品：.article_30{ width: 32% }

但我无法得到我需要的布局，项目之间也没有空格，这是什么问题？

【问题讨论】：

fitRows 没有任何选项。它不与砖石一起使用，因为您已经设置了它。由于您使用的是 fitRows，因此它不会向上滑动，因为它完全按照预期的方式进行操作，因为您在要向上滑动的项目上方有两个不同高度的项目。点击 fitRows here 看看会发生什么。

标签： css jquery-isotope jquery-masonry

【解决方案1】：

尝试不同的layout modes。例如packery。请记住，某些布局模式必须单独下载，并且不包含在主源文件中。

【讨论】：

我们也应该永远记住盒子的大小必须是倍数。就像 w1: 30% - w2: 15% 一样，否则即使你使用 packery layoutmode，你最终也会得到空白

【解决方案2】：

你可以选择这样的布局模式http://prntscr.com/6eyn4n http://prntscr.com/6eyn92

【讨论】：

【解决方案3】：

项目的大小必须是多个：如果一个项目是 400 另一个需要是 200 等等..

【讨论】：