瀑布流思路总结
前言:瀑布流的效果,页面都是由很多数据块(这里将数据块分成多列)组成,每个数据块的高度不等,
浏览器下拉后数据都是从高度最小列最先展示在用户面前;
实例:http://miiee.taobao.com/choice.htm?pcid=8106&cid=8106001
1、首先获取每列的高度,保存在一个数组中,然后求数组中最小项的值
function minIndexOf( array ) { var arr = array || [], len = arr.length, index; if ( len > 0 ) { index = 0; if ( len === 1 ) { return index; } for ( var i = 1; i < len; i++ ) { if ( arr[index] > arr[i] ) { index = i; } } } return -1; } var columns_h = []; // 保存列高 var minIdx = minIndexOf(columns_h); var min_h = columns_h[minIdx]; // 求数组中最小项的值
2、(滚动条下拉)判断什么时候再次请求数据
// 当浏览器 视口高度+scrollTop 大于等于 最小列的底部位置时,再次请求数据 function scrollEvent () { var scrollTop = $(window).scrollTop(); var viewH = $(window).height(); // 在resize事件中更新 var dynamicVal = scrollTop + viewH; var columns_postop = $(selector).offset().top; var referenceVal = columns_postop + min_h; if ( dynamicVal >= referenceVal ) { // 再次请求ajax } }
3、循环处理数据,每插入一个数据块,需要更新min_h,这样每次插入都是最先插入到高度最小列中
function handleLoopData ( start, end ) { // var itemList; 假设这是数据集合 if ( var i = start; i < end; i++ ) { var itemObj = itemList[i]; if ( itemObj != undefined ) { // 结合HTML,将数据插入到高度最小列中,最小列根据min_h来判断 // do something // 再次更新min_h的值 } } }
优化:
1、ajax请求返回的数据可以分批插入到页面中,利用 handleLoopData函数的两个参数;
2、在处理图片时,可以先将url地址设置在img标签的一个属性中,CSS可以将图片父容器背景设置为一个加载的gif,当图片加载完毕后,再将该地址填入到img标签的src中。
// 修改一下handleLoopData函数中代码 if ( itemObj != undefined ) { // 结合HTML,将数据插入到高度最小列中,最小列根据min_h来判断 // do something // 再次更新min_h的值 // 假如将url地址设置为img标签的data-url中 var $targetSingle; // 目标数据块,即插入到高度最小列的元素 // 图片加载完毕后,将其地址设置为对应容器的src中 var imgURL = $targetSingle.find('img'); var img = new Image(); var dataImg = $(img).data('dataObj', $targetSingle); // 监听load事件 dataImg.bind('load', function(){ var dataObj = $(this).data('dataObj'); imgUrl = dataObj.find('img').attr('data-url'); dataObj.find('img').attr('src', imgUrl); }); img.src = imgUrl; }
分类: JavaScript