瀑布流

时间：2015-04-07 21:36:09 阅读：156 评论：0 收藏：0 [点我收藏+]

标签：

使用js原生代码：

特点：图片等宽不等高。

采取的方法：定位。

实现的原理：盒子里放数据块。加载图片的时候，通过计算高度，使用绝对定位的方式将数据块定位在它应该出现的位置。

图片之间的空隙部分使用padding还是margin？为什么？

答：推荐使用padding，因为我们在js中，我们需要获取每个数据块的高度，在获取数据块高度的时候，我们又需要知道数据块的高度以及数据块与数据块之间的距离，js中offsetHeight属性是可以获得包括padding在内的高度的。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="main">
        <div class="box">
            <div class="pic">
                <img src="./images/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/11.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/12.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/13.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="./images/14.jpg" alt="">
            </div>
        </div>
    </div>
    <script src=‘js/warterfall_1.js‘></script>
</body>
</html>

css部分：

*{
    margin:0;
    padding:0;
}

.main{
    position:relative;
}

.box{
    padding:15px 0 0 15px;
    float:left;
}

.pic{
    padding:10px;
    border:1px solid #ccc;
    border-radius: 5px;
    box-shadow:0 0 5px #ccc;
}

.pic img{
    width:165px;
    height:auto;
}

javascript部分：

window.onload=function(){
    waterfall(‘main‘,‘box‘);
    var dataInt={‘data‘:[{‘src‘:‘1.jpg‘},{‘src‘:‘2.jpg‘},{‘src‘:‘3.jpg‘},{‘src‘:‘4.jpg‘}]};
    window.onscroll=function(){
        if(checkscrollside()){
            var oParent = document.getElementById(‘main‘);// 父级对象
            for(var i=0;i<dataInt.data.length;i++){
                var oPin=document.createElement(‘div‘); //添加 元素节点
                oPin.className=‘pin‘;                   //添加 类名 name属性
                oParent.appendChild(oPin);              //添加 子节点
                var oBox=document.createElement(‘div‘);
                oBox.className=‘box‘;
                oPin.appendChild(oBox);
                var oImg=document.createElement(‘img‘);
                oImg.src=‘./images/‘+dataInt.data[i].src;
                oBox.appendChild(oImg);
            }
            waterfall(‘main‘,‘box‘);
        };
    }
}
function waterfall(parent,box){
    //将main下面的所有class为box的元素取出来
    var oParent=document.getElementById(‘parent‘);
    var oBoxs=getElementsByClass(oParent,box);
    //计算整个页面显示的列数（页面宽/盒子的宽）
    var oBoxW=oBoxs[0].offsetWidth;
    var cols=Math.floor(document.documentElement.clientWidth/oBoxW)
    //设置main的宽度.如果不设置，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.top=minH+‘px‘;
            //oBox[i].style.left=oBoxW*index+‘px‘;
            oBoxs[i].style.left=oBoxs[index].offsetLeft+‘px‘;
        l    };
    }
}

function getElementsByClass(parent.clsName){
    var obj=parent.getElementsByTagName(‘*‘);
    var pics=[];
    for (var i=0;i<obj.length;i++){
        if(obj[i].className==clsName){
            pics.push(obj[i]);
        }
    };
    return pics;
}

function getMinhIndex(arr,val){
    for(var i in arr){
        if(arr[i]==val){
            return i;
        }
    };
}

//检测是否具备了滚动条加载数据库的条件
function checkScrollSlide(){
    var oParent=document.getElementById(‘main‘);
    var oBoxs=getElementByClass(oParent,‘box‘);
    var lastBoxh=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
    var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
    var height=document.body.clientHeight||document.documentElement.clientHeight;
    return (lastBoxH<scrollTop+height)?true:false;
}

瀑布流

标签：

原文地址：http://www.cnblogs.com/zhangmener/p/4399392.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行