实现图片瀑布流布局（两列）

样式：

<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>

转载于:https://www.cnblogs.com/cenfengtao/p/10058394.html