js实现瀑布流布局显示图片

最新推荐文章于 2024-07-10 13:54:40 发布

YiField

最新推荐文章于 2024-07-10 13:54:40 发布

阅读量428

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_38932407/article/details/88858861

版权

本文介绍了如何使用JavaScript快速实现图片的瀑布流布局，适合前端开发者参考，为面试做准备。

摘要由CSDN通过智能技术生成

好慌啊明天面试，没时间整理了

window.onload=function () {
    waterfall('main','box');
}
function  waterfall(parent,box) {
    //mian下所有的class为box元素取出来
    var oParent = document.getElementById(parent);
    var oBoxs=getByClass(oParent,box);
    /*计算整个页面显示的列数*/
    var oBoxW=oBoxs[0].offsetWidth;
    var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
    //设置main的宽
    oParent.style.cssText='width:'+oBoxW*cols+'px; margin:0 auto';
    var hArr=[];
    for(var i=0;i<oBoxs.length;i++){
        if (i >= cols) {
            var minH = Math.min.apply(null, hArr);
            var index = getMinhIndex(hArr, minH);
            oBoxs[i].style.position = 'absolute';
            oBoxs[i].style.top = minH + 'px';
            oBoxs[i].style.left = oBoxs[index].offsetLeft + 'px';
            hAr