从左到右渲染div列表，然后从下到上渲染行（通过CSS / jQuery）

Question

我有一种情况，我有一个具有特定顺序的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

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

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

Answer 1

你应该看看flexbox 。 这里有一个小提示，演示它是如何工作的 ，但我只在Chrome中测试了它。

.flex{
width:400px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;}

Answer 2

这可以使用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/

Answer 3

这不是一个可行的解决方案， 然而 ，但随着Chrome和Safari，您可以使用writing-mode在CSS3。 查看垂直文本的w3-dev部分 。

.row { 
  writing-mode: bt-rl; 
}
.box { 
  display: inline-block;
  vertical-align: top;
}

http://jsfiddle.net/mpcjs/4/

Answer 4

我不确定如何从底部堆叠DIV，但这将扭转它们：

HTML：

<div>
    <div>
        <div class='box'>1</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</div>
    </div>
</div>

CSS：

.box{
    float:left;
    border:1px solid #000;
    width:22%;
    margin:1%;
}

jQuery的：

$('div > .box').each(function() {
    $(this).prependTo(this.parentNode);
});

Answer 5

如果你想要一个纯CSS解决方案，它会喜欢：

基本的HTML

<div class="container">HOVER ME!
<div class="inner">one</div>
<div class="inner">two</div>
<div class="inner">three</div>
<div class="inner">four</div>
<div class="inner">five</div>
<div class="inner">six</div>
<div class="inner">seven</div>
</div>

我们将内部浮动到右边：

.inner {
    float: right;
    width: 100px;
    height: 100px;
    background-color: lightsalmon;
    margin: 5px;
    font-size: 20px;
}

就这样 ！ 好吧，不是全部，你仍然需要盘旋

.container:hover,
.container:hover div {
    -webkit-transform: rotate(180deg);
    -webkit-transition: all 3s;
}

嗯，这只是为了让它变得有趣，但效果很好，不是吗？

测试一下