jquery实现瀑布流思路

主页 M

jquery实现瀑布流思路

2020-05-15 网页编程网 网页编程网

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
   var img=$('.box');
   var imgWidth=img.width()//图片宽度，outerWidth
   var screenWidth=$(window).width();//窗口高度
   var cols=parseInt(screenWidth/imgWidth);
   var heightArr=[];
   $.each(img,function(index,item){
      var imgHeight=$(item).height();//每张图片高度
         if(index<cols){//是否第一行
            heightArr[index]=imgHeight;
         }else{
            //最小高度用...
            var minHeight=Math.min(...heightArr);
            //最小高度索引，用$.inArray()
            var minHeightIndex=$.inArray(minHeight,heightArr);
            //也可用findIndex()返回符合条件数组的第一个元素的位置
            //var minHeightIndex=
            $(item).css({
               position:'absolute',
               top:minHeight+'px',//最小高度
               left:minHeightIndex*imgWidth+'px'//高小高度索引*图片高度
            });
            heightArr[index]+=imgHeight;//更新最小高度的值
         }//if
      })
   })
</script>
</head>
<body>
<div class="box">
   <img src="new4/image/5.jpg" />
<img src="new4/image/1.jpg" />
<img src="new4/image/2.jpg" />
<img src="new4/image/3.jpg" />
<img src="new4/image/4.jpg" />

<img src="new4/image/6.jpg" />
</div>
</body>

阅读原文

阅读 2881

123 显示电脑版