这是我的画廊布局。我想在上面的网格风格和响应安排的图像。它有随机宽度和随机高度。但我所有的图像都是垂直的。所以我需要帮助,这方面的工作。
先谢了。
我试过使用CSS column-count。这是我得到的
HTML代码:
<div id="container">
<ul id="myContent">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
<li><img src="images/6.jpg" alt=""></li>
</ul>
</div>
CSS:
#container {
width: 1000px;
margin: 0 auto;
}
#myContent {
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
width: 800px;
list-
}
#myContent img{
display: inline-block;
margin-bottom: 0px;
width:auto;
}
#myContent li:nth-child(n+1):nth-child(-n+4) {text-align:right;}
#myContent li:nth-child(n+5):nth-child(-n+6){text-align:left;}
如何动态地放置/排列图像?是否有其他方法?
1条答案
按热度按时间e4yzc0pl1#
看,这只是一个尝试列计数从css。但我需要它动态通过jquery。
我如何安排这种风格的图像?我所有的图像都在相同的大小。但需要出现随机宽度或随机高度。
尝试在选择器
"#myContent li img"
上调用.each()
以迭代img
元素;利用Math.min
、Math.random
设置每个img
元素的伪随机height
、width
小提琴http://jsfiddle.net/bh2txhqw/4/