JQUERY瀑布流--研讨

Question

本帖最后由 net_lover 于 2013-04-08 12:38:23 编辑

Answer 1

JQUERY瀑布流原理：每次排版取前一排最低的位置接着排。demo与脚本都有注解。代码也不难理解。认真看看会明白的。

Answer 2

技术贴必须得顶，楼主不妨看看http://www.school51.com/Sell/guang.aspx它，可变换页面大小试试

Answer 3

加载不要“单线程”走。理论上来说 屏内的图片应该同时加载起来。。
支持自己玩demo的童鞋。

Answer 4

谢谢！加载图片没有故意设置单线加载，只是做动画一张张图片来做，看代码可以知道。因为从上往下排，图片在没有加载成功之前是不知道其高度（我们只限宽不限高）如果硬排上去将影响下一排图片的排版。
这里的图片加载与普通网页一样的。第一次加载已存在HTML的图片，窗口滚动到底部时一次加载N张图片。
至于13楼提供的参考例子里它有特殊性：就是它一页固定了几张图片，然后它在全部图片加载完后先安排好位置后大家一起移动，如果在我们这个例子中无限加载的，图片会很多动画肯定会慢，而且很多效果都看不到。
瀑布流的乐趣就在于不断拉滚动条不断出现图片，这跟QQ好友动态信息展示类似。

Answer 5

不错，顶一个！
http://www.oschina.net/p/cdesk

Answer 6

13楼的网站也是瀑布流，他引用的是：http://masonry.desandro.com/
这个外老厉害：http://desandro.com/
很强的动画效果：http://isotope.metafizzy.co/也是上面那个老外的一个项目。
里面还有很多项目，大家围观吧。

Answer 7

jquery.isotope
jQuery Masonry
这些跨行排版就复杂了。

Answer 8

很漂亮！！ 我用的是http://masonry.desandro.com/，用起来简单点。 自己不用写什么东西

Answer 9

正常现象，我加了代码：$("body,html").scrollTop(y);//设置滚动条，与动画同步
目的是让滚动条与有动画的地方同步。如果删除就不会了。这个可以设置的，目前只设置加一行var html='';//实现案例中此改成ajax请求json或html,每次请求只增加一排
for(var i=con.l;i<con.l+con.list*2;i++){
//*2就变成两行了

Answer 10

把它扩展一下如何？waterfall({
    cls:"cell",
    buffer:2
})function waterfall(options){
    var cls = options.cls;
    var buffer = options.buffer ? 1:options.buffer;}

Answer 11

http://huaban.com/随便找了个demo 你看看别人的玩法就明白了 原理这事就不用阐释了呵呵。

Answer 12

看到了最后，想若若的问几个问题，我没接触过瀑布留技术，希望能教教我，你们反复在讨论的几个问题都有些技术点我没听懂：
1.单线程加载是什么，是指加载完一个图片再设定下一个图片的src吗；
2.“先排版后加载图片”这个是你是怎么判断出来的，我看那几个demo没看出区别啊；
3.jQuery Masonry跨行排版是什么意思，什么是跨行；