jQuery 像 masorny 布局一样的自定义网格

Question

我正在尝试为网站制作一个像 masorny 布局这样的自定义网格，所以我考虑采用像 masorny 这样的 3 列布局来创建 3 个 div，这将作为 parent divs 和内部追加 children div 取决于 id 号。

html 加价：

// Parent DIVs

<body>

  <div id="column1"></div>
  <div id="column2"></div>
  <div id="column3"></div>

</body>

jQuery:

$(document).ready(function(){

    var items = 32;

    for (var i=1;i<=items.length;i++) {

        if (i % 3 ==0) {
           $('#column3').append('<div class="children" id="'+i+'">'+i+'</div>');
        }
        else if (i % 2 ==0) {
           $('#column2').append('<div class="children" id="'+i+'">'+i+'</div>');
        }
        else {
           $('#column1').append('<div class="children" id="'+i+'">'+i+'</div>');
       }

    }

});

我得到了我想要的结果，但不是我想要的顺序。

我想要的顺序是这样的：

1,2,3

4,5,6

7,8,9

10,11,12

...

但是我有类似的东西：

1,2,3

5,4,6

7,8,9

11,10,12

在这里查看我的示例：http://jsfiddle.net/7u4rqxxt/

注意我不想使用 masorny.js 或类似的东西，我想自己定制。

任何想法，谢谢:)

Answer 1

您订购专栏的方式有问题：

5 % 2 = 1, so it will be display on the column 1

我把column3的名字改成column0

#column1,
#column2,
#column0

和

<div id="column1"></div>
<div id="column2"></div>
<div id="column0"></div>

我按 i%3 排序：

for (var i=1;i<=32;i++) {
$('#column' + (i % 3)).append('<div class="children">'+i+'</div>');
}

在此处查看示例：

http://jsfiddle.net/7u4rqxxt/3/

jQuery 像 masorny 布局一样的自定义网格

jQuery Custom Grid like masorny layout

grid

jquery