瀑布流布局javascript or css3实现

最新推荐文章于 2024-08-01 15:19:04 发布

java是最好的语言

最新推荐文章于 2024-08-01 15:19:04 发布

阅读量815

点赞数

分类专栏： js 文章标签： javascript 蘑菇街瀑布流布局 css3

本文链接：https://blog.csdn.net/sinat_34498624/article/details/53580644

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

javascript实现瀑布流布局：

效果图：

这里写图片描述

是不是觉得很厉害列！以前蘑菇街和美丽说就是用这种布局，容易让用户沉浸在里面，

思路：

每个图片设置一个盒子，每个盒子的position都是absolute，先摆放第一行的盒子，计算出高度最低的一列，往上面加
这里写图片描述

然后继续寻找高度最低的，填上去
这里写图片描述

怎么寻找到最短的一列呢，根据第一行的个数初始化数组，将他们的高度存储到数组里面，然后很容易就找到最小的，在填盒子上去（用绝对定位，left和它上面的一样，top就是上面盒子高度）填上去之后，数组这个值加上添加盒子的高度，然后继续寻找最小的。听不懂的话我建议你多看源码学习下我的代码。。。额。好吧我编不下。。去看看源码吧

这里写图片描述

源码：

waterfallLayout.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pubuliu</title>
    <script type="text/javascript" src="js/test.js"></script>
<style type="text/css">
    .box img{
        height: auto;
        width: 162px;
    }
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 6px;
        box-shadow: 0 0 6px #ccc;
    }
    .pin{
        padding: 15px 0 0 15px;
        float: left;
    }
    #main{
        position: relative;
    }
</style>

</head>

<body>
    <div id="main">
        <div class="pin">
            <div class="box">
                <img src="./images/1.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/2.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/3.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/4.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/5.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/6.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/7.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/8.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/9.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/10.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/11.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/12.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/13.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/14.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/15.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/16.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/17.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/18.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/19.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/20.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="./images/21.jpg"/>
            </div>
        </div>

    </div>
</body>
</html>

waterfall.js:


/****
    *通过父级和子元素的class类 获取该同类子元素的数组
    */
function getClassObj(parent,className){
    var obj=parent.getElementsByTagName('*');//获取 父级的所有子集
    var pinS=[];//创建一个数组 用于收集子元素
    for (var i=0;i<obj.length;i++) {//遍历子元素、判断类别、压入数组
        if (obj[i].className==className){
            pinS.push(obj[i]);
        }
    };
    return pinS;
}

/****
    *获取 pin高度 最小值的索引index
    */
function getminHIndex(arr,minH){
    for(var i in arr){
        if(arr[i]==minH){
            return i;
        }
    }
}

window.onload=function(){

    waterfall('main','pin');
    //滚动加载数据源
    var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
    //滚动加载
    window.onscroll=function(){
        if(checkoutScroll()){
            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','pin');
        }
    }
}

//检查是否滚动到需要加载的位置
function checkoutScroll(){
    var oParent=document.getElementById('main');
    var aPin=getClassObj(oParent,"pin");
    var lastH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2); //最后一个框的top加height/2
    var scrollH=document.documentElement.scrollTop||document.body.scrollTop;//兼容ie傻逼
    var documentH=document.documentElement.clientHeight;//页面高度
    return (lastH<scrollH+documentH)?true:false;
}



//瀑布流
function waterfall(parent, pin){
    var oParent=document.getElementById(parent);
    var aPin=getClassObj(oParent,pin);
    //alert(aPin.length);
    var iPinW=aPin[0].offsetWidth;//一个框的宽
    var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行有多少个框
    console.log("num:"+num);
    oParent.style.cssText='width:'+iPinW*num+'px;margin:0 auto;';//设置父级居中样式：定宽+自动水平外边距

    var pinHArr=[];
    for(var i=0; i<aPin.length; i++){
        var pinH=aPin[i].offsetHeight;
        if(i<num){
            pinHArr[i]=pinH
        }else{
            var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minH
            var minHIndex=getminHIndex(pinHArr,minH);
            console.log("minHIndex:"+minHIndex);
            aPin[i].style.position='absolute';//设置绝对位移
            aPin[i].style.top=minH+"px";
            aPin[i].style.left=aPin[minHIndex].offsetLeft+"px";
            pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加了块框后的列高
        }

    }

}

CSS3实现瀑布流布局

当然如果你真的这样写了，你会发现你傻逼了，因为css3有个属性很简单就做了

这里写图片描述

waterfall.css:

#main{
    -webkit-column-width:202px;//每一列的宽度
    -moz-column-width:202px;//火狐
    -o-column-width:202px;//chrome
    -ms-column-width:202px;//ie
}
.box{
}
.pin{padding:10px 10px 10px 10px;
    border:1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
    width: 165px;}

.pin img{display: block;
    width: 165px;
    height: auto;}