javascript - 从左到右连续呈现 div 列表，然后从下到上呈现行(通过 CSS/jQuery)

Question

我遇到这样一种情况，我有一个 div 列表，这些 div 具有特定的顺序，需要以非常复杂的方式呈现。简单来说，这是我的 HTML:

<div>
    <div class="box">1 (first in list)</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9 (last in list)</div>
</div>

我想要显示 div 的方式是从左到右 4 行，每行从下到上堆叠，如下所示:

9
5 6 7 8
1 2 3 4

我已经创建了一个显示结果的 fiddle :http://jsfiddle.net/mpcjs/ - 但是，我想要一个不需要重新排序 HTML 中的 div 的解决方案。另请注意，div 的数量是可变的。

这可能吗？欢迎使用 CSS3/jQuery 解决方案!

Answer 1

这可以使用 jQuery 插件 jQuery Masonry .

替换这个(从第 287 行开始)

var position = {
  top: minimumY + this.offset.y
};

与

var position = (this.options.fromBottom) ? {
  bottom: minimumY + this.offset.y
} : {
  top: minimumY + this.offset.y
};

jsFiddle:http://jsfiddle.net/fnexE/