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

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>

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