分别使用javascript，jquery，css实现瀑布流布局：

第一种方式：使用JavaScript：

瀑布流布局

*{padding:0;margin:0;}

.clearfix:after,

.clearfix:before {

content: " ";

display: table;

}

.clearfix:after {

clear: both;

}

.main {

position: relative;

-webkit-column-width: 210px;

-moz-column-width: 210px;

-webkit-column-gap: 5px;

-moz-column-gap: 5px;

}

.box {

float: left;

padding: 15px 0 0 15px;

}

.box .pic {

width: 180px;

height: auto;

padding: 10px;

border-radius: 5px;

box-shadow: 0 0 5px #cccccc;

border: 1px solid #cccccc;

}

.box .pic img {

display: block;

width: 100%;

}

window.onload = function(){

waterfall('main','box');

//模拟json数据

var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]};

//监听scroll事件

window.onscroll = function(){

var isPosting = false;

if(checkScollSlide('main','box') && !isPosting){

var oParent = document.getElementById('main');

for(var i in dataJson.data){

isPosting = true;

var oBox = document.createElement('div');

oBox.className = 'box';

oBox.innerHTML = '

';

oParent.appendChild(oBox);

}

isPosting = false;

waterfall('main','box');

}

}

}

/*

* parent 父元素id clsName 块元素类*/

function waterfall(parent,clsName){

//获取父元素

var oParent = document.getElementById(parent),

//获取所有box

aBoxArr = oParent.getElementsByClassName(clsName),

//单个box宽度

iBoxW = aBoxArr[0].offsetWidth,

// 列数

cols = Math.floor(document.documentElement.clientWidth / iBoxW);

oParent.style.cssText = 'width:'+iBoxW*cols+'px;margin:0 auto;';

//储存所有的高度

var hArr = [];

for(var i = 0; i < aBoxArr.length; i++){

if(i < cols){

hArr[i] = aBoxArr[i].offsetHeight;

}else{

//获取hArr最小值

var minH = Math.min.apply(null,hArr),

// hArr最小值索引index

minHIndex = getMinHIndex(hArr,minH);

aBoxArr[i].style.cssText = 'position:absolute;top:'+minH+'px;left:'+aBoxArr[minHIndex].offsetLeft+'px;';

//添加元素之后更新hArr

hArr[minHIndex] += aBoxArr[i].offsetHeight;

}

}

}

//获取最小值索引

function getMinHIndex(arr,val){

for(var i in arr){

if(arr[i] == val){

return i;

}

}

}

//检查是否满足加载数据条件,parent 父元素id clsName 块元素类

function checkScollSlide(parent,clsName){

var oParent = document.getElementById(parent),

aBoxArr = oParent.getElementsByClassName(clsName),

// 最后一个box元素的offsetTop+高度的一半

lastBoxH = aBoxArr[aBoxArr.length - 1].offsetTop + aBoxArr[aBoxArr.length - 1].offsetHeight / 2,

//兼容js标准模式和混杂模式

scrollTop = document.documentElement.scrollTop || document.body.scrollTop,

height = document.documentElement.clientHeight || document.body.clientHeight;

return lastBoxH < scrollTop + height ? true : false;

}

第二种方式：使用jquery：(html结构跟css同上)

$( window ).on( "load", function(){

waterfall('main','box');

//模拟数据json

var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]};

window.οnscrοll=function(){

var isPosting = false;

if(checkscrollside('main','box') && !isPosting){

isPosting = true;

$.each(dataJson.data,function(index,dom){

var $box = $('

$box.html('

');

$('#main').append($box);

waterfall('main','box');

isPosting = false;

});

}

}

});

/*

parend 父级id

clsName 元素class

*/

function waterfall(parent,clsName){

var $parent = $('#'+parent);//父元素

var $boxs = $parent.find('.'+clsName);//所有box元素

var iPinW = $boxs.eq( 0 ).width()+15;// 一个块框box的宽

var cols = Math.floor( $( window ).width() / iPinW );//列数

$parent.width(iPinW * cols).css({'margin': '0 auto'});

var pinHArr=[];//用于存储 每列中的所有块框相加的高度。

$boxs.each( function( index, dom){

if( index < cols ){

pinHArr[ index ] = $(dom).height(); //所有列的高度

}else{

var minH = Math.min.apply( null, pinHArr );//数组pinHArr中的最小值minH

var minHIndex = $.inArray( minH, pinHArr );

$(dom).css({

'position': 'absolute',

'top': minH + 15,

'left': $boxs.eq( minHIndex ).position().left

});

//添加元素后修改pinHArr

pinHArr[ minHIndex ] += $(dom).height() + 15;//更新添加了块框后的列高

}

});

}

//检验是否满足加载数据条件，即触发添加块框函数waterfall()的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)

function checkscrollside(parent,clsName){

//最后一个块框

var $lastBox = $('#'+parent).find('.'+clsName).last(),

lastBoxH = $lastBox.offset().top + $lastBox.height()/ 2,

scrollTop = $(window).scrollTop(),

documentH = $(document).height();

return lastBoxH < scrollTop + documentH ? true : false;

}

第三种方式：使用css：(html结构同上)

.clearfix:after,

.clearfix:before {

content: " ";

display: table;

}

.clearfix:after {

clear: both;

}

.main {

position: relative;

[color=#ff0000]-webkit-column-width: 210px;

-moz-column-width: 210px;

-webkit-column-gap: 5px;

-moz-column-gap: 5px;[/color]

}

.box {

float: left;

padding: 15px 0 0 15px;

}

.box .pic {

width: 180px;

height: auto;

padding: 10px;

border-radius: 5px;

box-shadow: 0 0 5px #cccccc;

border: 1px solid #cccccc;

}

.box .pic img {

display: block;

width: 100%;

}

瀑布流实现方式比较：

Javascript原生方式/jquery方式

1、需要计算，列数 = 浏览器窗口宽度/图片宽度，图片定位是根据每一列的高度计算下来图片的位置；

2、图片排序是按照图片计算的位置横向排列，位置是计算出来的，比较规范

Css方式

1、不需要计算，浏览器自动计算，只需设置列宽，性能高；

2、列宽随着浏览器窗口大小进行改变，用户体验不好；

3、图片排序按照垂直顺序排列，打乱图片显示顺序；

4、图片加载还是依靠javascript/jquery实现

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！