网页布局--瀑布流

发布时间：2020-07-20 02:03:01 作者：大大果
来源：网络阅读：572

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

*{margin: 0;padding: 0;}

#wrap{width: 90%;margin: 10px auto;border: 1px solid;}

.pics{width: 200px;padding: 5px;border: 1px solid #ddd;margin-top: 15px;left: 0;top: 0;}

.pics img{width: 200px;display: block;}

</style>

$(function(){

var position = []; //声明一个空数组，存放各列高度

$(window).on('load resize',function(){

var wrapWidth = $('#wrap').innerWidth(), //容器的寬度

$pics = $('.pics'),

picsWidth = $pics.eq(0).outerWidth(),

cols = Math.floor(wrapWidth / picsWidth),//每行的列數

spacing = (wrapWidth - picsWidth * cols) / (cols + 1),

html =''; //用於保存中間處理過程中的html字符串

/*=================按最短列添加================*/

//循環向wrap中存放cols個列盒子

for(i=0; i<cols; i++){

html += "<div style='display:inline-block; width:"+picsWidth+"px; margin-left:"+spacing+"px; vertical-align:top;'></div>";

}

var $wrapCols = $(html).appendTo('#wrap');

//遍历所有的图片并将它们按最短了的顺序放在各个列div元素中

$pics.each(function(index,element){

if(index < cols){

position.push(0);

}

//查找最短列的索引值

var min = Math.min.apply(null,position), //position中的最小值 minIndex = $.inArray(min,position); //找出最短列的索引

$wrapCols.eq(minIndex).append(element); //将当前图片append到最短列

position[minIndex] += $(element).outerHeight(true); //重新计算minIndex列的高度

});

//ajax加载更多图片当滚动高度超过最短列时开始加载

var _page = 2,

isLoading = false; //是否是正在通过ajax加载图片

$(window).on('scroll',function(){

var _scTop = $(this).scrollTop(),

minHeight = Math.min.apply(null,position),

winHeight = $(window).height(); //窗口高度

if(!isLoading && _scTop >= minHeight-winHeight){

isLoading = true;

$.ajax({

type:'get',

url:'http://apis.baidu.com/txapi/mvtp/meinv',

data:{'num':20},

headers:{'apikey':'your own apiey'}, //此处的apikey需要换成自己的apikey

dataType:'json',

success:function(data){

console.log(data);//先将responseText打印出来看一下长什么样子，方便我们进一步对其进行处理

var array = data.newslist,

html = '';

$.each(array,function(){

html += '<div class="pics"><img src="' + this.picUrl+ '" /></div>';

});

$(html).each(function(index,element){

$(this).children('img').on('load',function(){

var minIndex = $.inArray(Math.min.apply(null,position),position);

$('#wrap>div').eq(minIndex).append(element);

position[minIndex] += $(element).outerHeight(true);

});

isLoading = false; //可以继续加载图片

}

});

}

});

</script>

</head>

<body>

</div>

</body>

</html>

<!--最后我们可以看到得到的responseText长成下面图片中的样子，首先它是一个object,有3个属性，分贝为code，msg和newslist。我们感兴趣的是newslist，因为里面保存了请求到的图片对象，而且它是一个数组，它的picUrl属性就是我们需要的图片网络地址。有了这些信息就可对它进行处理了。详细步骤见代码，就不啰嗦了。网页布局--瀑布流

最后希望对大家有所帮助。-->

附件：http://down.51cto.com/data/2368262

网页布局--瀑布流

相关阅读