瀑布流纯js实现

前言

瀑布流布局是网站比较流行的一种布局方式Demo ,本案例将深入讲解实现瀑布流布局的三大方式:JavaScript、jQurey和CSS3,学习如何用JavaScript方法实现图片的定位及排序、两种不同的方式对图片进行持续加载,以及CSS3中多栏布局怎么实现瀑布流布局。

demoimage

html页面

瀑布流html页面实现:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>瀑布流测试</title>
    <link rel="stylesheet" href="css/style.css" media="screen">
    <script language="javascript" src="js/script.js"></script>
</head>
<body>
    <div id="main"> 
        <div class="box">
            <div class="pic">
                <img src="img/1.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/2.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/3.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/4.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/5.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/6.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/7.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/8.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/9.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/10.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/11.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/12.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/13.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/14.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/15.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/16.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/17.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/18.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/19.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/20.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/1.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/2.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/3.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/4.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/5.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/6.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/7.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/8.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/9.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/10.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/11.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/12.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/13.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/14.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/15.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/16.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/17.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/18.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/19.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/20.jpg" />
            </div>
        </div>
    </div>
</body>
</html>



js代码

window.onload=function(){
    waterfall('main','box');
    var dataInt = {"data":[{"src":"bg-1.jpg"},{"src":"bg-2.jpg"},{"src":"bg-3.jpg"},{"src":"bg-4.jpg"},{"src":"bg-5.jpg"},{"src":"bg-6.jpg"},{"src":"bg-7.jpg"},{"src":"bg-8.jpg"},{"src":"bg-9.jpg"},{"src":"bg-10.jpg"},{"src":"bg-11.jpg"},{"src":"bg-12.jpg"},{"src":"bg-13.jpg"},{"src":"bg-14.jpg"},{"src":"bg-15.jpg"},{"src":"bg-16.jpg"}]};
    window.onscroll = function(){
         if(checkScrollSlide()){
            var oParent = document.getElementById('main');
            //渲染数据
            for(var i = 0;i<dataInt.data.length;i++){
                var oBox = document.createElement('div');
                oBox.className = 'box';
                var oPic = document.createElement('div');
                oPic.className = 'pic';
                oBox.appendChild(oPic);
                var oImg = document.createElement('img');
                oImg.src = 'backimg/'+dataInt.data[i].src;
                oPic.appendChild(oImg);
                oParent.appendChild(oBox);

            }
            waterfall('main','box');
         }

    }
}
function waterfall(parent,box){
    //将main下的所有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){
            hArr.push(oBoxs[i].offsetHeight);
        }else{
            var minH = Math.min.apply(null,hArr);
            var index = getMinHindex(hArr,minH);
            oBoxs[i].style.position='absolute';
            //oBoxs[i].style.left = oBoxw*index+'px';
            oBoxs[i].style.left = oBoxs[index].offsetLeft+'px';
            oBoxs[i].style.top = minH+'px';
            hArr[index] += oBoxs[i].offsetHeight;
        }
    }



}
//根据class获取元素
function getByClass(parent,clsName){
    var boxArr = new Array(), //用来储存取到的所有class为box的元素
        oElements=parent.getElementsByTagName('*');
    for(var i=0;i<oElements.length;i++){
        if(oElements[i].className == clsName){
            boxArr.push(oElements[i]);
        }
    }
    return boxArr;
}
function getMinHindex(arr,val){
    for(var i in arr){
        if(arr[i] == val){
            return i;
        }
    }
}
//检测是否具备滚动加载图片的条件
function checkScrollSlide(){
    var oParent = document.getElementById('main');
    var oBoxs = getByClass(oParent,'box');
    var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight);
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.body.clientHeight || document.documentElement.clientHeight;
    return (lastBoxH<=scrollTop+height)?true:false;
}

css代码

*{
    margin:0;
    padding:0;
}
#main{
    position: relative;
}
.box{
    padding:15px 0 0 15px;
    float:left;

}
.pic{
    padding:8px;
    border:1px solid #ccc;
    border-radius:5px;
    box-shadow: 0 0 5px  #888888;
}
.pic img{
    width:250px;
    height:auto;
    border-radius:5px;

}

Demo所需图片自行寻找改名即可
有什么留言或问题直接在文末留下评论即可。

欢迎访客:

    Contents
    1. 1. 前言瀑布流布局是网站比较流行的一种布局方式Demo ,本案例将深入讲解实现瀑布流布局的三大方式:JavaScript、jQurey和CSS3,学习如何用JavaScript方法实现图片的定位及排序、两种不同的方式对图片进行持续加载,以及CSS3中多栏布局怎么实现瀑布流布局。
    2. 2. 前言
      1. 2.1. html页面
      2. 2.2. js代码
      3. 2.3. css代码
      4. 2.4. 欢迎访客:
    |