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

我遇到了一个div列表，需要渲染一个特定的顺序一个复杂的方式。简单来说，这是我的HTML：在一行中从左到右渲染div列表，然后渲染行从下到上（通过CSS/jQuery）

<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 S上的方式是4行从左至右，从底部堆积的每一行顶部，像这样：

9 
5 6 7 8 
1 2 3 4

我创建结果的小提琴，显示了我以后我：http://jsfiddle.net/mpcjs/ - 不过，我想是不需要div S IN的HTML的重新排序的解决方案。还请注意，div的数量是可变的。

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

来源

2013-03-20 Alistair Findlay

>一样，不需要的div所以我假设你不想改变DIV的的类太的重新排序的解决方案？或者这是一种可能性？如果不是的话，我正在看这个问题的一些神奇的回复 – happybuddha 2013-03-20 15:38:18

任何事情都可以改变（即使是HTML），只要div的顺序保持不变！ – 2013-03-20 15:41:22

这是可能的使用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/

来源

2013-03-20 15:52:37

不错！由于比flexbox更好的浏览器兼容性而被接受为答案。 – 2013-03-20 15:58:31

你应该看看flexbox。 Here's a fiddle demonstrating how it would work，与我只在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;}

来源

2013-03-20 15:52:15 bmceldowney

只要确保您注意到浏览器兼容性部分。说它不适用于任何版本的IE或Safari。 – gotohales 2013-03-20 15:54:30

真的很好的解决方案 - 我接受了jQuery的答案，而不仅仅是因为更好的兼容性。尽管如此，我仍然会记住这种方法！ – 2013-03-20 15:59:47

我已经在IE 10中使用了这些标签的-ms版本，它可以工作：http：//caniuse.com/#feat=flexbox，但我同意在10之前你会被洗净。 – bmceldowney 2013-03-20 16:23:37

我不确定如何堆栈底部的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); 
});

来源

2013-03-20 15:52:57 advermark

该CSS仅用于显示目的。 – advermark 2013-03-20 15:54:14

这不是一个可行的解决方案，但，但Chrome和Safari，你可以在CSS3中使用writing-mode。检查出w3-dev section on vertical text。

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

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

来源

2013-03-20 16:08:44

非常有趣！ – 2013-03-20 16:17:19

如果你想要一个纯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; 
}

嗯，这只是让它一点点乐趣，但效应是好的，不是吗？

test it

来源

2013-03-21 06:53:48 vals

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

回答

相关问题