js瀑布流，有点小问题

2020-07-03 网页编程网 网页编程网

var heightArr=[];

$.each(img,function(index,item){
    //第一行，单独处理
    var imgHeight=$(item).outerHeight();//每一张图片高度
    if(index<cols){
        heightArr[index]=imgHeight;

}else{
        var minH=Math.min(...heightArr);
        console.log(minH);
        var mIndex=$.inArray(minH,heightArr);
        //var mIndex=heightArr.findIndex(item=>item==minH);
        console.log(heightArr);
        $(item).css({
            position:'absolute',
            top:minH+'px',//本行最小高度值
            left:mIndex*imgWidth+'px'//本行最小高度索引*imgWidth
        });
        heightArr[mIndex]+=imgHeight;
    }//if
})
}
</script>
</head>
<body>
<p>瀑布流宽度相同，但高度不同。</p>
<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" />

阅读原文

阅读 3511

123 显示电脑版