瀑布流 jQuery和js区别

瀑布流是什么：瀑布流式布局。

一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

布局优点：

有效降低界面复杂度，节省空间。无需复杂的页码导航链接或按钮。
对触屏设备来说，交互方式更符合直觉
更高的参与度

知识点：

box-sizing 属性可以被用来调整这些表现:

content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

只写完css和html只能保证每一列的第一个图片第一个盒子能够在我们所想要的位置上，其他的不一定。

html:

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrap">
    <div><img src="images/picOne.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picTwo.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picTwo.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picOne.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picTwo.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picOne.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picTwo.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picOne.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picTwo.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picOne.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picTwo.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picTwo.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picOne.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picTwo.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picOne.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picTwo.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picOne.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picTwo.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picOne.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picOne.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picOne.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picOne.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picTwo.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picOne.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picOne.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picOne.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div><div><img src="images/picTwo.jpg" alt=""/>
    <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
</div>
    <div><img src="images/picOne.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picOne.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
    <div><img src="images/picTwo.jpg" alt=""/>
        <a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
    </div>
</div>

</body>

css:


*{
    margin: 0;
    padding: 0;
    /*border: none;*/
}
body{
    background: #dddddd;
}
img{
   /* border: none;*/
}
a{
    text-decoration: none;
    color: #444;
}
a:hover{
    color: #999;
}
/*wrap*/
#wrap{
    position: relative;
    width: auto;
    height: auto;
    margin: 0 auto;
}
#wrap div{
    float: left;
    width: 302px;
    height: auto;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    background: #ffffff;
    box-sizing: border-box;
}
#wrap>div>img{
    width: 100%;

}
#wrap>div>a{
    display: block;
    font-size: 18px;
    font-weight: bold;
    line-height: 40px;
    text-align: center;
}

js:

function waterfall(wrap,boxes){
    //获取屏幕可以显示的列数
    var boxWidth=boxes[0].offsetWidth+20;//从边框到边框的距离，不包含外边距。所以外边距相加：10+10=20
    var windowWidth=document.documentElement.clientWidth;
    var colsNumber=Math.floor(windowWidth/boxWidth);

    //设置容器宽度
    wrap.style.width=boxWidth * colsNumber+'px';

    //定义一个数组并存储每一列的高度
    var everyHeight=new Array();
    for(var i=0;i<boxes.length;i++){
        if(i<colsNumber){
            everyHeight[i]=boxes[i].offsetHeight+20;
        }else{
            var minHeight=Math.min.apply(null,everyHeight);
            var minIndex=getIndex(minHeight,everyHeight);
            var leftValue=boxes[minIndex].offsetLeft-10;
            boxes[i].style.position='absolute';
            boxes[i].style.top=minHeight+'px';
            boxes[i].style.left=leftValue+'px';
            everyHeight[minIndex]+=boxes[i].offsetHeight+20;
        };
    };

};
//获取最小列的索引
function getIndex(minHeight,everyHeight){
    for(index in everyHeight){
        if(everyHeight[index]==minHeight){
            return index;
        };
    };
};

//html和css加载完成再执行。
window.onload=function(){
    var wrap=document.getElementById('wrap');
    var boxes=wrap.getElementsByTagName('div');
    waterfall(wrap,boxes);
};

jQuery：


var waterfall=function(wrap,boxes){
    //获取屏幕可以显示的列数
    var boxWidth=boxes.eq(0).width()+40;
    var windowWidth=$(window).width();
    var colsNumber=Math.floor(windowWidth/boxWidth);
    //设置容器的宽度
    wrap.width(boxWidth*colsNumber);
    //定义一个数组并存储每一列的高度
    var everyHeight=new Array();
    for(var i=0;i<boxes.length;i++){
        if(i<colsNumber){
            everyHeight[i]=boxes.eq(i).height()+40;
        }else{
            var minHeight=Math.min.apply(null,everyHeight);
            var minIndex=getIndex(minHeight,everyHeight);
            var leftValue=boxes.eq(minIndex).position().left;
            boxes.eq(i).css({
                'position':'absolute',
                'top':minHeight,
                'left':leftValue,
                'opacity':'0'
            }).stop().animate({/*第二行慢慢出来的动画*/
                'opacity':'1'
            },1000);
            everyHeight[minIndex]+=boxes.eq(i).height()+40;
        };
    };

}
};


//获取最小列的索引
function getIndex(minHeight,everyHeight){
    for(index in everyHeight){
        if(everyHeight[index]==minHeight){
            return index;
        };
    };
};
$(document).ready(function(event){
    var wrap=$("#wrap");
    var boxes=$("#wrap").children('div');
    waterfall(wrap,boxes);
})

jQuery相对于js的优点：

//jQuery 
var wrap=$("#wrap");
var boxes=$("#wrap").children('div');
//js
  var wrap=document.getElementById('wrap');
  var boxes=wrap.getElementsByTagName('div');

//js 获取边框到边框的距离
var boxWidth=boxes[0].offsetWidth+20;
//jQuery width()只获取内容的宽度
var boxWidth=boxes.eq(0).width()+40;

//jQuery 
var windowWidth=$(window).width();
//js
var windowWidth=document.documentElement.clientWidth;

//js  设置属性  后面要跟上单位
wrap.style.width=boxWidth * colsNumber+'px';
//jQuery
wrap.width(boxWidth+colsNumber);

//数组
//jQuery
 everyHeight[i]=boxes.eq(i).height()+40;
//js
everyHeight[i]=boxes[i].offsetHeight+20;

//js
boxes[i].style.position='absolute';
boxes[i].style.top=minHeight+'px';
boxes[i].style.left=leftValue+'px';
//jQuery  用css方法
 boxes.eq(i).css({
                'position':'absolute',
                'top':minHeight,
                'left':leftValue,
                'opacity':'0'
            }).stop().animate({/*第二行慢慢出来的动画*/
                'opacity':'1'
            },1000);

jQuery在写法上比JavaScript简洁，开发速度快。

瀑布流 jQuery和js区别

猜你喜欢