[Java教程]瀑布流思路总结
0 2013-07-26 14:00:20
前言:瀑布流的效果,页面都是由很多数据块(这里将数据块分成多列)组成,每个数据块的高度不等,
浏览器下拉后数据都是从高度最小列最先展示在用户面前;
实例: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; }
本文网址:http://www.shaoqun.com/a/66342.html
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:admin@shaoqun.com。
0