java瀑布流_[Java教程]瀑布流思路总结

[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