Andy's Blog » jquery 瀑布流, jquery Waterfall, 瀑布流, 瀑布流布局, Wookmark, 瀑布流 jquery, kissy waterfall, waterfall jquery, jquery瀑布流, waterfall 瀑布流, KISSY.Waterfall.Loader, kissy jquery, jquery瀑布流waterfall, KISSY的waterfall插件 » Waterfall 瀑布流布局 jQuery & KISSY

Waterfall 瀑布流布局 jQuery & KISSY


瀑布流布局站点欣赏


目前而言实现瀑布流主要有3种方式: float, absolute, css3 colum.
最佳实现方式是绝对定位 absolute
最大的缺点就是很耗CPU内存资源,机器烂很容易卡死!

教程 http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/

jQuery 实现 Waterfall 插件集合

jQuery.waterfall https://github.com/dio-el-claire/jquery.waterfall
jQuery Masonry http://masonry.desandro.com/index.html
jQuery WookMark http://www.wookmark.com/jquery-plugin
jQuery Isotope http://isotope.metafizzy.co/demos/layout-modes.html
jQuery iMuFeng Waterfall https://github.com/iMuFeng/Waterfall

jQuery Waterfall

jQuery.waterfall 使用方法
Call 3 requests in series:

$.waterfall(
    
function() { $.ajax({url : first_url}) },
    
function() { $.ajax({url : second_url}) },
    
function() { $.ajax({url : another_url}) }
).fail(function(error) {
    
console.log(error)
).
done(function(result1, result2, result3) {
    
console.log(result1);
    
console.log(result2);
    
console.log(result3)
});

Call 2 requests, check results, on error stop waterfall:

$.waterfall(
    
function() { $.ajax(....) },
    
function() { $.ajax(....) },
    
function(arg1, arg2) {
        
if (arg2.answer != 42) {
            
return false;
        
}
        
return 42;
    
},
    
function() { $.ajax({url : 'index.php?answer='+arguments[2]}) }
).fail(function() {
    
console.log(arguments)
).
done(function() {
    
console.log(arguments)
});

$.waterfall arguments may have any type, not only function:

$.waterfall(
    
function() { $.ajax({url : first_url}) },
    $.
ajax({url : second_url}),
    
"string",
    
1,
    
null,
    
{a : 12},
    
function() { return 42 }
).fail(function() {
    
console.log(arguments)
).
done(function() {
    
console.log(arguments)
});

jQuery Masonry 使用方法

$('#container').masonry({
itemSelector: '.box'
});

jQuery WookMark 使用方法

$('#myContent li').wookmark({offset: 2});

jQuery iMuFeng Waterfall 使用方法
加载 jQuery库 (需1.4+)
加载 jQuery.waterfull.min.js , 必须在jQuery库之后;
调用接口: $node.waterfall({/* 此处为设置选项, 可留空 */})
如:

$('#container').waterfall({})

设置选项

{
itemSelector:'.post-home', //子元素id/class, 可留空
columnCount:4, // 列数, 纯数字, 可留空
columnWidth:300, // 列宽度, 纯数字, 可留空
isResizable:false, // 自适应浏览器宽度, 默认false
isAnimated:false, // 元素动画, 默认false
Duration:500, // 动画时间
Easing:'swing', // 动画效果, 配合 jQuery Easing Plugin 使用
endFn:function(){}, // 回调函数
}

AJAX

$.ajax({
    
url: Url,
    
beforeSend: function() {},
    
success: function(date) {
        $
('#container').append(date).waterfall({});
    
}
})

KISSY Waterfall

KISSY Waterfall http://docs.kissyui.com/docs/html/demo/component/waterfall/index.html

KISSY 的 Waterfall 组件主要包含两个部分,一个是对现有数据块进行排列计算各自所在的位置; 二是下拉滚动时,触发加载数据操作,并把数据添加到目标容器中。

1) 数据块排列,算法步骤简述下:

初始化时,对容器中已有数据块元素进行第一次计算,需要用户给定: a,容器元素 — 以此获取容器总宽度; b,列宽度; c,最小列数; 最终列数取的是容器宽度/列宽度和最小列数的最大值,这样保证了,当窗口很小时,仍然出现最小列数的数据;
获得列数后,需要保存每个列的当前高度,这样在添加每个数据块时,才知道起始高度是多少;
依次取容器中的所有数据块,先寻找当前高度最小的某列,之后根据列序号,确定数据块的left,top值,left 为所在列的序号乘以列宽,top 为所在列的当前高度,最后更新所在列的当前高度加上这个数据块元素的高度,至此,插入一个元素结束;
当所有元素插入完毕后,调整容器的高度为各列最大的高度值,结束依次调整;
性能效率上的注意点: a,如果当前正在调整中,又触发了 resize 事件,需要将上次调整暂停后执行这次调整(见 timedChunk 函数); b,resize 触发会很频繁,可以将回调函数缓存一段时候后执行,即当这段时间内多次触发了resize事件,但回调函数只会执行一次(见 S.buffer 函数)
感兴趣的可以参见源码。

2) 异步加载数据,前面讲的是如何对容器中已有元素进行排列,但很多情况下,还需要不断加载新数据块,为此专门设计了一个独立的模块 KISSY.Waterfall.Loader,其实这个功能就更简单了,仅包含两个步骤:

绑定滚动事件,并确定预加载线高度值,即滚动到哪个高度后,需要去加载数据,其实这个就是列的最小高度值,这样当前滚动值和最小高度值比较一下即可判断出来,是否要触发加载数据;
加载数据,为了不对数据源做太多限制,完全由使用者自己决定数据源从哪边获取和其格式,这样更好的方便用户使用。为此,该组件只提供一个load(success,end) 接口,怎样load 由用户自己去定义,而其中的 success/end,分别给出如何添加新数据(suceess 即同 addItems)/如何停止加载的接口。

Incoming search terms:

Tags: KISSY, 瀑布流, jQuery, Waterfall, 布局

本文地址: http://blog.21andy.com/20120527/2041.html