javascript下的瀑布流效果

来源：互联网发布：mac vmware tools 编辑：程序博客网时间：2024/05/16 10:16

以下瀑布流效果增加了本地加载数据的功能，实际上加载更多的图片应该通过网络进行获取，这里只是进行了本地图片传送的模拟。

目录结构如下：

index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JS瀑布流效果——布局</title>    <link rel="stylesheet" type="text/css" href="css/style.css">    <script src="js/app.js"></script></head><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>        <div class="box">            <div class="box_img">                <img src="img/3.jpg">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="img/4.jpg">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="img/5.jpg">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="img/6.jpg">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="img/7.jpg">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="img/8.jpg">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="img/9.jpg">            </div>        </div>        <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>        <div class="box">            <div class="box_img">                <img src="img/3.jpg">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="img/4.jpg">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="img/5.jpg">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="img/6.jpg">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="img/7.jpg">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="img/8.jpg">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="img/9.jpg">            </div>        </div>        <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>        <div class="box">            <div class="box_img">                <img src="img/3.jpg">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="img/4.jpg">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="img/5.jpg">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="img/6.jpg">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="img/7.jpg">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="img/8.jpg">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="img/9.jpg">            </div>        </div>    </div></body></html>

style.css

*{    margin: 0px;    padding: 0px;}#container{    position: relative;    /*width: 900px;    overflow: hidden;*/}.box{    padding: 5px;    float: left;}.box_img{    padding: 5px;    border: 1px solid #ccc;    box-shadow: 0 0 5px #ccc;    border-radius: 5px;}.box_img img {    width: 150px;    height: auto;}

app.js

window.onload = function() {    imgLocation("container","box");    //加载数据——模拟数据，使用json字符串进行传输    var imgData = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},        {"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},        {"src":"8.jpg"},{"src":"9.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},        {"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},        {"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"1.jpg"},        {"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},        {"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},        {"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},        {"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},        {"src":"9.jpg"}]};    //实现下滑动、自动加载    //监听滚动条    window.onscroll = function() {        if(checkFlag("container","box")) {            var cparent = document.getElementById("container");            for(var i = 0; i < imgData.data.length; i++) {                var ccontent = document.createElement("div");                ccontent.className = "box";                cparent.appendChild(ccontent);                var boximg = document.createElement("div");                boximg.className = "box_img";                ccontent.appendChild(boximg);                var img = document.createElement("img");                img.src = "img/"+imgData.data[i].src;                boximg.appendChild(img);            }            imgLocation("container","box");        }    }}function imgLocation(parent, content) {    //将parent下所有的content取出    var cparent = document.getElementById(parent);    var ccontent = getChildElement(cparent,content);    //console.log(ccontent);    var imgWidth = ccontent[0].offsetWidth;    //浏览器所有放置的图片列数    var num = Math.floor(document.documentElement.clientWidth / imgWidth);    cparent.style.cssText = "width:"+imgWidth*num+"px; margin:0 auto";    var BoxHeightArr = [];    for(var i = 0; i < ccontent.length; i++) {        //BoxHeightArr[i] = content[i].offsetHeight;        //console.log(BoxHeightArr[i]);        if(i<num) {            BoxHeightArr[i] = ccontent[i].offsetHeight;        }        else {            var minHeight = Math.min.apply(null, BoxHeightArr);            var minIndex = getminHeightLocation(BoxHeightArr, minHeight);            ccontent[i].style.position = "absolute";            ccontent[i].style.top = minHeight+"px";            //ccontent[i].style.left = ccontent[minIndex].offsetWidth * minIndex+"px";            ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";            BoxHeightArr[minIndex] += ccontent[i].offsetHeight;        }    }}function getChildElement(parent,content) {    var contentArr = [];    var allcontent = parent.getElementsByTagName("*");    for(var i = 0; i < allcontent.length; i++) {        if(allcontent[i].className==content) {            contentArr.push(allcontent[i]);        }    }    return contentArr;}//得到一行中最小高度图片的位置function getminHeightLocation(BoxHeightArr, minHeight) {    for(var i in BoxHeightArr) {        if(BoxHeightArr[i] == minHeight)        return i;    }}function checkFlag(parent, content) {    var cparent = document.getElementById(parent);    var ccontent = getChildElement(cparent,content);    var lastContentHeight = ccontent[ccontent.length-1].offsetTop; //距页面顶部的距离    //console.log(lastContentHeight);    //页面被“卷”的高度    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;    //当前页面的高度    var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;    if(lastContentHeight <= scrollTop + pageHeight) {        return true;    }    return false;}

运行结果如下：

0 0