样式:
<style>
ul{
width: 100%;
margin: 0 auto;
}
ul li{
width: 50%;
}
ul li div{
width: 100%;
margin-bottom: 10px
}
img{
width: 100%;
}
</style>
HTML:
<ul id="content">
<li class="box">
<div>
<span>1</span>
<img src="/Public/img/shareImg1.png" onload="water()">
<span>432票</span>
<span>点击投票/已投票</span>
</div>
</li>
<li class="box">
<div>
<span>1</span>
<img src="/Public/img/shareImg1.png" onload="water()">
<span>432票</span>
<span>点击投票/已投票</span>
</div>
</li>
<li class="box">
<div>
<span>1</span>
<img src="/Public/img/shareImg1.png" onload="water()">
<span>432票</span>
<span>点击投票/已投票</span>
</div>
</li>
</ul>
脚本:
<script type="text/javascript">
// 瀑布流布局
function water(){
var arrBox=$('#content').children('.box');// box对象
var arrBoxH=[];//数组,用于存储左侧列中的所有块框相加的高度
var arrBoxR=[];//数组,用于存储右侧列中的所有块框相加的高度
for(var i=0;i<arrBox.length;i++){ //遍历box
var boxH=arrBox.eq(i).innerHeight(); //获得box的高度
if(i==0){
arrBox.eq(i).addClass("left"); //第一行中的第一个块box添加左浮动(left是自己写好的有float:left属性的选择器名)
arrBoxH[i]=boxH; //第一行中的第一个块box 先添加进数组arrBoxH
}else if(i==1){
arrBox.eq(i).addClass("right");//第一行中的第一个块box添加右浮动
arrBoxR[i]=boxH; //第一行中的第二个个块box 先添加进数组arrBoxR
}else{
var leftNum = arrBoxH.reduce(function (x, y) {
return x + y;
});//计算左侧列的高度
var rightNum = arrBoxR.reduce(function (x, y) {
return x + y;
});//计算右侧列的高度
if(leftNum > rightNum) //比较两侧高度大小,决定为该box添加左浮动还是右浮动
{
arrBox.eq(i).removeClass();
arrBox.eq(i).addClass("box right"); //左侧较高为该box添加右浮动
arrBoxR[i]=boxH; //将高度添加在右侧数组
}else {
arrBox.eq(i).removeClass();
arrBox.eq(i).addClass("box left"); //右侧较高为该box添加左浮动
arrBoxH[i]=boxH; //将高度添加在左侧数组
}
}
}
}
</script>