您的位置 >>> 星想互联 >>> 编程技术 >>> JQUERY+JS
jquery实现瀑布流图片
点击数:278  发布时间2018-02-12 21:56:18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.11.2.min.js"></script>
<style>
   *{padding:0;margin:0;}
ul,li{list-style:none;}
ul li{float:left;}
ul{width:1000px;margin:0 auto;position:relative; }
li{width:200px;}
li img{width:200px;height:auto;}
    </style>


</head>
<body>

</body>
<div></div>
<ul>
<li><img src="pic/a1.jpg"></li>
<li><img src="pic/a2.jpg"></li>
<li><img src="pic/a3.jpg"></li>
<li><img src="pic/a4.jpg"></li>
<li><img src="pic/a5.jpg"></li>
<li><img src="pic/a6.jpg"></li>
<li><img src="pic/a7.jpg"></li>
<li><img src="pic/a8.jpg"></li>
<li><img src="pic/a9.jpg"></li>
<li><img src="pic/a10.jpg"></li>
<li><img src="pic/a11.jpg"></li>
<li><img src="pic/a12.jpg"></li>
<li><img src="pic/a13.jpg"></li>

</ul>
<script>
$(function(){
$(window).on('load',function(){
waterfall();
})

function waterfall(){
var box=$("ul li");
var w=box.eq(0).outerWidth();
var cols=Math.floor($("ul").width()/w);
var hArr=[];
$(box).each(function(index,val){
  var h=box.eq(index).outerHeight();
           if(index<cols){
            hArr[index]=h
           }else{
            var minh=Math.min.apply(null,hArr);
            var minindex=$.inArray(minh,hArr);
            $(val).css({
            'position':'absolute',
            'top':minh,
            'left':minindex*w
            });
            hArr[minindex]+=box.eq(index).outerHeight();
          }
        
})

//$("div").html(hArr);

}

})
</script>
</html>

来源:咸宁网站建设
【上一篇】js中的事件大全
【下一篇】使用AJAX实现表单交互