在一行中从左到右渲染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解决方案!
这是可能的使用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/
不错!由于比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;}
只要确保您注意到浏览器兼容性部分。说它不适用于任何版本的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);
});
该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;
}
非常有趣! – 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;
}
嗯,这只是让它一点点乐趣,但效应是好的,不是吗?
>一样,不需要的div所以我假设你不想改变DIV的的类太的重新排序的解决方案?或者这是一种可能性?如果不是的话,我正在看这个问题的一些神奇的回复 – happybuddha 2013-03-20 15:38:18
任何事情都可以改变(即使是HTML),只要div的顺序保持不变! – 2013-03-20 15:41:22