瀑布流布局javascript or css3实现

javascript实现瀑布流布局:


效果图:


瀑布流布局javascript or css3实现_第1张图片


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

思路:

每个图片设置一个盒子,每个盒子的position都是absolute,先摆放第一行的盒子,计算出高度最低的一列,往上面加
瀑布流布局javascript or css3实现_第2张图片


然后继续寻找高度最低的,填上去
瀑布流布局javascript or css3实现_第3张图片


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

瀑布流布局javascript or css3实现_第4张图片

源码:


waterfallLayout.html:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pubuliutitle>
    <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//遍历子元素、判断类别、压入数组
        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; ivar 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 (lastHtrue: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; ivar pinH=aPin[i].offsetHeight;
        if(ielse{
            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有个属性很简单就做了

瀑布流布局javascript or css3实现_第5张图片


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;}

你可能感兴趣的:(js)