js瀑布流，有点小问题-网页编程网

当前位置：主页 >> DIV+CSS >> 正文

js瀑布流，有点小问题

阅读：4201 输入：2020-07-03 11:49:20

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

上一篇：css实现对话框并居中，应用立即执行函数（需改进）
下一篇：css实现二行三列展示

相关阅读: 单击文本框弹出下拉选项特效; html界面显示Toast提示效果; 页面右下角弹出提示窗口效果