是否可以向列添加索引？订购它们

Question

是否可以在列中添加索引或内容，因此当列具有更高的索引时，它将低于索引较低的列？

例如，http://jsfiddle.net/BL3M7/8/：

HTML：

<div class="block-container">
    <div class="block" style="height: 50px">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>
    <div class="block">6</div>
</div>

JS：

$(function() {
    setTimeout(function() {
        $('.block-container').append('<div class="block">7</div>');
        $('.block-container').append('<div class="block">8</div>');
        $('.block-container').append('<div class="block">9</div>');
        $('.block-container').append('<div class="block">10</div>');
        $('.block-container').append('<div class="block">11</div>');
    }, 2000);
})

CSS：

/* apply a natural box layout model to all elements */
*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body {
    margin: 0;
}

.block-container {
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
    width: 100%; 
}

.block {
    display: inline-block;
    margin-bottom: 20px;
    width: 100%;
    height: 100px;
    border: 1px solid black;
}

我希望方框7,8,9,10低于方框4,6,5。

Answer 1

我认为你的意思是：

JS Fiddle Demo

除此之外，所有代码都保持不变。

CSS：

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    margin: 0;
}
.block-container {
    width: 100%;
    overflow: hidden;
}
.block {
    display: block;
    margin-bottom: 20px;
    margin-left: 1%;
    margin-right: 1%;
    width: 30%;
    height: 100px;
    border: 1px solid black;
    float: left;
}

使用Javascript：

$(function () {
    setTimeout(function () {
        $('.block-container').append('<div class="block">7</div>');
        $('.block-container').append('<div class="block">8</div>');
        $('.block-container').append('<div class="block">9</div>');
        $('.block-container').append('<div class="block">10</div>');
        $('.block-container').append('<div class="block">11</div>');
    }, 2000);
});

HTML：

<div class="block-container">
    <div class="block" style="height: 50px">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>
    <div class="block">6</div>
</div>

这只是我将你的问题解释为瞄准结果的原因。如果我错了，我道歉。我知道您正在使用列，但如果这是您想要的外观，则不需要列。