javaScript基础学习（6）（瀑布流例子）

来源：互联网发布：股票涨停公式源码编辑：程序博客网时间：2024/06/05 15:49

html:

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>瀑布流</title>    <link rel="stylesheet" href="../css/pubu.css" type="text/css">    <script src="pubu.js" type="text/javascript"></script></head><body>    <div id="container">        <div class="box">            <div class="box_img">                <img src="../image/image3.png">            </div>        </div>        <div class="box">            <div class="box_img" >                <img src="../image/image.png">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="../image/image2.jpg">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="../image/image3.png">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="../image/image3.png">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="../image/image3.png">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="../image/image3.png">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="../image/image3.png">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="../image/image3.png">            </div>        </div>    </div></body></html>

css:

*{    margin: 0px;    padding: 0px;}#container{    position: relative;}.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;}

js:

window.onload = function(){    imgLocation('container',"box");    var imgData = {"data":[{"src":"image.png"},{"src":"image2.jpg"},{"src":"image3.png"}]};    window.onscroll = function(){        loadImage(imgData);    };    window.onresize = function(){        imgLocation('container',"box");    };}function loadImage(imgData){    if(checkFlag()){        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 = "../image/"+imgData.data[i].src;            boximg.appendChild(img);        }        imgLocation('container',"box");    }}function checkFlag(){    var cparent = document.getElementById("container");    var ccontent = getChildElement(cparent,"box");    var lastczontentHeight = ccontent[ccontent.length-1].offsetTop;    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;    var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;    if(lastczontentHeight<scrollTop+pageHeight){        return true;    }}//处理图片位置function imgLocation(parent,content){    //将parent下所有的content都取出    var cparent = document.getElementById(parent);    var ccontent = getChildElement(cparent,content);    //得到图片的宽度    var imgWidth = ccontent[0].offsetWidth;    var cols = Math.floor(document.documentElement.clientWidth / imgWidth);    //设置父盒子的样式    cparent.style.cssText = "width:"+imgWidth*cols+"px;margin:0 auto;";    //获取最短的图片    var BoxHeightArr = [];    for(var i=0;i<ccontent.length;i++){        if(i<cols){            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].offsetLeft + "px";            BoxHeightArr[minIndex] =  BoxHeightArr[minIndex]+ccontent[i].offsetHeight;        }    }}//获取最小高度的下标function getminHeightLocation(boxHeightArr,minHeight){    for(var i in boxHeightArr){        if(boxHeightArr[i] == minHeight){             return i;        }    }}//获取所有父盒子的子元素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;}

效果图：
这里写图片描述

0 0