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

Question

我有三个div：

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

在第一个div中，有2个项目带有＆＃34;添加新的＆＃34;按钮。每次点击＆＃34;添加新的＆＃34;按钮，创建一个新项目。所以，结构是这样的：

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

现在，我想，当第一列包含5个元素时，它将停止在该div上添加新项目。所以，＆＃34;添加新的＆＃34;按钮将显示在第二列，然后第6项也将添加到第二列。因此，从第11项开始，它们将被添加到最后一列。在第15项之后，不会添加任何项目。

因此，可视化就像这样：

如何制作功能？ Here is my fiddle。

Answer 1

认为你有一个m x n表，在这种情况下是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 - 进一步的行为，例如项目删除，由您自己承担。