javascript实现图片瀑布流

最新推荐文章于 2023-02-24 19:46:52 发布

jafisher

最新推荐文章于 2023-02-24 19:46:52 发布

阅读量185

点赞数

分类专栏：技术总结文章标签： javascript ViewUI

技术总结专栏收录该内容

21 篇文章 0 订阅

订阅专栏

[size=large] 瀑布流主要就是指数据按照瀑布方式自上而下加载，主要由于高度的不同造成的瀑布落差感（可以参考百度图片）。javascript实现图片瀑布流主要分三个步骤：
1.瀑布容器和图片属性设置（大小、边框、颜色、边距等）
2.图片加载方式
3.图片滚动加载

1.属性设置
html结构：[/size]


<body>
    <div id="container">
        <div class="box">
            <div class="box_img">
                <img src="img/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/2.jpg">
            </div>
        </div>
        //根据需要添加N个
        ......
        ......
    </div>
</body>

CSS样式：


/*图片采用统一宽度和原高度*/
.box_img img{ 
    width: 200px;
    height: auto;
}

/*其他属性自行设置*/
......
......

[size=large]2.图片加载
1）得到所有要加载显示的图片
2）计算每行图片的个数，先填充屏幕第1行
3）查找第1行中最小高度的图片
4）将第1行放不下的图片加载在第1行最小高度的图片的下方，同时该高度变为两张图片的总高度
5）按照4）的方式循环加载剩余图片[/size]


window.onload = function() {
  imgLoad("container", "box");
}

function imgLoad(parentBox, content) {
    var parent = document.getElementById(parentBox);
    var children = [];
    var tempChild = parent.getElementsByTagName("*");
    for(var i in tempChild) {
        if(tempChild[i].className == content) {
            children.push(tempChild[i]);
        }
    }

    var imgWidth = children[0].offsetWidth;
    var imgNum = Math.floor(document.documentElement.clientWidth / imgWidth);
    parent.style.cssText = "width:" + imgWidth * imgNum + "px; margin:0 auto";

    var imgHeightList = [];
    for(var i=0;i<children.length;i++) {
        if(i<imgNum) {
            imgHeightList[i] = children[i].offsetHeight;
        } else {
            var minHeight = Math.min.apply(null, imgHeightList);
            var minIndex;
            for(var j in imgHeightList) {
                if(imgHeightList[j] == minHeight) {
                    minIndex = j;
                }
            }
            children[i].style.position = "absolute";
            children[i].style.top = minHeight + "px";
            children[i].style.left = children[minIndex].offsetLeft + "px";
            imgHeightList[minIndex] = imgHeightList[minIndex] + children[i].offsetHeight;
        }
    }
}

[size=large]3.滚动加载
1）鼠标滚动时判断当前屏幕高度加上滚动高度是否大于页面顶部到当前屏幕底部的高度
2）大于时获取需要滚动加载的图片资源，并循环创建图片的html结构
3）调用图片加载方式循环加载图片[/size]


var imgData = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}......]};
window.onscroll = function() {
        var parent = document.getElementById("container");
        var children = [];
        var tempChildren = parent.getElementsByTagName("*");
        for(var i in tempChildren) {
            if(tempChildren[i].className == "box") {
                children.push(tempChildren[i]);
            }
        }
        var lastChildHeight = children[children.length - 1].offsetTop;
        var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        if(lastChildHeight < scrollTop + pageHeight) {
            for(var i=0;i<imgData.data.length;i++) {
                var child = document.createElement("div");
                child.className = "box";
                parent.appendChild(child);
                var boxImg = document.createElement("div");
                boxImg.className = "box_img";
                child.appendChild(boxImg);
                var img = document.createElement("img");
                img.src = "img/" + imgData.data[i].src;
                boxImg.appendChild(img);
            }
            imgLoad("container", "box");
        }
    }