瀑布流 - Viven张

公告

主要记录下js内容这块。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>waterfall</title>
    <link rel="stylesheet" href="css/waterfall.css">
</head>
<body>
    <div id="waterfall">
        <div class="waterfall-box">
            <div class="waterfall-img">
                <img src="images/1.jpg">
            </div>
        </div>
        <div class="waterfall-box">
            <div class="waterfall-img">
                <img src="images/2.jpg">
            </div>
        </div>
        <div class="waterfall-box">
            <div class="waterfall-img">
                <img src="images/3.jpg">
            </div>
        </div>
        <div class="waterfall-box">
            <div class="waterfall-img">
                <img src="images/4.jpg">
            </div>
        </div>
        <div class="waterfall-box">
            <div class="waterfall-img">
                <img src="images/5.jpg">
            </div>
        </div>
        <div class="waterfall-box">
            <div class="waterfall-img">
                <img src="images/6.jpg">
            </div>
        </div>
        <div class="waterfall-box">
            <div class="waterfall-img">
                <img src="images/7.jpg">
            </div>
        </div>
        <div class="waterfall-box">
            <div class="waterfall-img">
                <img src="images/8.jpg">
            </div>
        </div>
        <div class="waterfall-box">
            <div class="waterfall-img">
                <img src="images/9.jpg">
            </div>
        </div>
        <div class="waterfall-box">
            <div class="waterfall-img">
                <img src="images/10.jpg">
            </div>
        </div>
        <div class="waterfall-box">
            <div class="waterfall-img">
                <img src="images/11.jpg">
            </div>
        </div>
        <div class="waterfall-box">
            <div class="waterfall-img">
                <img src="images/12.jpg">
            </div>
        </div>
    </div>
<script src="js/waterfall.js"></script>
</body>
</html>

View Code

*{
    margin: 0;
    padding:0;
}
ul,li{
    list-style: none;
}
#waterfall{
    position: relative;
}
.waterfall-box{
    float: left;
    width: 600px;
    border:1px solid #ccc;
    box-shadow: 2px 2px 10px #999;
    margin:10px;
    padding: 10px;
}
.waterfall-img img{
    display: block;
    width: 100%;
}

View Code

上面是HTML+CSS代码

首先要文档加载完，开始运行js

window.onload = fucntion(){
        waterFall(‘waterfall’,'waterfall-box');      
    
}

传入瀑布流需要加载的函数，并传入两个参数，一个是最外层的waterfall，还有一个是包含img图片的waterfall-box

然后开始写waterFall函数

function waterFall(parent,child){
    var mr = 20;//图片之间的距离
    var oParent = document.getElementById(parent);
    var oChild = getChild(parent,child);
    //获取浏览器窗口的宽度。
    var winW = document.documentElement.clientWidth;
    //获取单个child的宽度
    var boxW = oChild[0].offsetWidth;
    //获取一排几个box
    var cls = Math.floor(winW/boxW);
    //设置parent的属性。
    oParent.style.width = (boxW + mr )*cls+'px';
    oParent.style.margin ='0 auto';


    function minHei(array,n){
        var oFristBoxH  =[];
        for(var i=0;i<array.length;i++){
            if(i<n){
                oFristBoxH.push(array[i].offsetHeight);
            }else{
                var oFristBoxHmin = Math.min.apply(null,oFristBoxH);
                var lastMin = minIndex(oFristBoxH,oFristBoxHmin);
                array[i].style.position = 'absolute';
                array[i].style.top = oFristBoxHmin+mr + 'px';
                array[i].style.left = array[lastMin].offsetLeft-mr/2+'px';
                oFristBoxH[lastMin]+=array[i].offsetHeight+mr;
            }
        }
    };
    minHei(oChild,cls)


}
//获取子元素
function getChild(parent,child){
    var oParent = document.getElementById(parent);
    var odocument =  oParent.getElementsByTagName('div');
    var oChild =[];
    for (var i =0;i<odocument.length;i++){
        if (odocument[i].className==child){
            oChild.push(odocument[i]);
        }
    }
    return oChild;
}
//求数组最小值的下标
function minIndex(array,value){
    for(var i =0;i<array.length;i++){
        if(array[i] == value){
            return i;
        }
    }
}
//判断下拉距离
function scrollH(parent,child,list){
    var oChild = getChild(parent,child);
    var lastChild = oChild[oChild.length-1];
    var winH  =  document.documentElement.clientHeight||document.body.clientHeight;
    var boxH = lastChild.offsetTop +Math.floor(lastChild.offsetHeight/2);
    var scollTop = document.body.scrollTop||document.documentElement.scrollTop;
    var scollH = winH + scollTop;
    if(boxH<scollH &&oChild.length<list.data.length+12){
        return true;
    }else{
        return false;
    }
}

最后需要加载的数据代码写进去模拟一个list数据，里面包含了图片。通过上面判断下拉距离的函数scrollH返回的结果确定是否加载，同事判断数据是否加载完毕，如果数据已经加载完，那么则停止数据加载

如若不然，会重复加载数据。

var list = {data:[
        {'img':'1.jpg'},
        {'img':'2.jpg'},
        {'img':'3.jpg'},
        {'img':'4.jpg'},
        {'img':'5.jpg'},
        {'img':'6.jpg'},
        {'img':'7.jpg'},
        {'img':'8.jpg'},
        {'img':'9.jpg'},
    ]
    }
    window.onscroll = function(){
       var scrollTF =  scrollH('waterfall','waterfall-box',list);
        if(scrollTF){
            var oPatent = document.getElementById('waterfall');
            for(var i =0;i<list.data.length;i++){
                var oBox = document.createElement('div');
                oBox.className = 'waterfall-box';
                oPatent.appendChild(oBox);
                var oimgBox = document.createElement('div');
                oimgBox.className = 'waterfall-img';
                oBox.appendChild(oimgBox);
                var oImg = document.createElement('img');
                oImg.src = 'images/'+ list.data[i].img;
                oimgBox.appendChild(oImg);
                waterFall('waterfall','waterfall-box');
            }
        }
    }

以上则完成了瀑布流的设计

posted on 2017-02-27 15:49 Viven张阅读(232) 评论(2) 编辑收藏举报

刷新页面返回顶部