javascript - Jquery砌体棋盘

Question

出于某种原因，我的 jquery masonry 对 col1 和 col2 的处理方式不同，尽管它们在 CSS 中是相同的（除了颜色和边距）

  $(document).ready(function() {
        $('#container').masonry({
            columnWidth:800
        });

$('#container').masonry({
            itemSelector: '.col1',
            columnWidth: 150
         });

        $('#container').masonry({
            itemSelector: '.col2',
            columnWidth: 150
        });
});

Col2 位于右侧，就在 col1 的下方，就像棋盘一样。这是带有代码的 JSfiddler 的链接。谁能发现为什么会这样？ 此示例的 JS Fiddler 代码 谢谢，Argyle

Answer 1

当您有 3 列并且每列中只有 1 个积木时，这是正常的。当你只给它一个或两个变量时，你会对一个基本上解决一个困难数学问题的程序有什么期望？这是一个解决方案，但也许不是最好的？尝试在每个容器中添加更多砖块，您会看到算法如何解决您的问题？

根据要求，我建议您再次阅读 masonry 文档和我的答案，但如果您只想将 masonry 算法添加到主要内容中，则每块砖都不需要它：

 $('#container').masonry({
        columnWidth:800
    });

    $('#container').masonry({
        itemSelector: '.col1',
        columnWidth: 150
     });

    $('#container').masonry({
        itemSelector: '.col2',
        columnWidth: 150
    });

     $('#container').masonry({
        itemSelector: '.col3',
        columnWidth: 150
    });

只需添加 1 次并更改所有砖块都有 1 个选择器，例如：

   $('#container').masonry({
        itemSelector: '.main',
        columnWidth: 150
    });