如何在 bootstrap 处将动态内容拆分为多列

Question

我有三个div:

<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>

在第一个 div 中，有 2 个项目带有 "add new" 按钮。每次单击 "add new" 按钮，都会创建一个新项目。所以，结构是这样的：

<div class="col-xs-4">
   <p>Item 1</p>
   <p>Item 2</p>
   <button>Add New</button>
</div>

现在，我想，当第一列包含 5 个元素时，它将停止在该 div 上添加新项目。因此，"add new" 按钮将显示在第二列，第 6 项也将添加到第二列。因此，从第 11 项开始，它们将添加到最后一列。第15条后，不再添加任何条目。

所以，可视化是这样的：

如何实现功能？ Here is my fiddle。

Answer 1

假设您有一个 m x ntable，在本例中为 5 x 3。

先按列填充：

var count = $('.single').length,
    $cols = $('.col-xs-4'),
    maxPerColumn = 5;

$('body').on('click', '.add-new', function(event) {  
    // We stop at 3 * 5 = 15 this way
    if(count >= ($cols.length * maxPerColumn))
        return;

    // Math.floor(count / maxPerColumn) is the integer division between current item count,
    // and max items allowed per count - will go from 0 to 14 / 5 = 2, remainder 4.
    $cols.eq(Math.floor(count / maxPerColumn)).append($('.single').eq(0).clone());
    count++;

});

$('body').on('click', '.remove', function() {  
    $(this).parent().remove();
});

Check the fiddle - 进一步的行为，如移除物品，由您决定。

如何在 bootstrap 处将动态内容拆分为多列

How to split dynamic content into multiple columns at bootstrap

jquery

twitter-bootstrap