求一靠谱的瀑布流布局解决方案

This topic created in 4943 days ago, the information mentioned may be changed or developed.

我承认，看到瀑布流有很多同学会吐槽 !-__-
现在是用的jquery.Masonry，用下来发现有点问题：
1、如果图片加载很慢，这个布局就惨不忍睹了，即使配合imagesLoaded效果也不大好。
2、不知道http://pinsta.me/是怎么做到的，它的加载效果就不错。
3、如果jquery.Masonry配合imagesLoaded可以达到2的效果，那请看下面的网址，是不是有什么地方写错了。

因为前端太菜，所以想到这来找找答案。
地址：
http://instagcn.sinaapp.com

jquery

imagesLoaded

Masonry

12 replies • 1970-01-01 08:00:00 +08:00

chairo

Nov 2, 2012

提前获取到图片的宽高，用jquery.Masonry就不会惨不忍睹了。
参考俺之前做的一个图片站：http://heisi.au92.com

chone

Nov 2, 2012

可以先给个固定的高宽，等img.onload再设置为图片的高宽。

yibin001

Nov 2, 2012

@chairo
<img width="200" height="200" src="http://distilleryimage9.s3.amazonaws.com/083f3bc224d511e282e122000a1f9aae_6.jpg" class="preview" alt="" lazy-src="http://distilleryimage9.s3.amazonaws.com/083f3bc224d511e282e122000a1f9aae_6.jpg" />
图片的高度已经指定了，http://instagcn.sinaapp.com/，这里是可以看到的，所以我不明白是哪里的问题。

AlloVince

Nov 2, 2012

$content.imagesLoaded(function(){
});

把这一层去掉就行了。加上这个会等待图片加载完才布局

yibin001

Nov 2, 2012

@AlloVince 去掉的话。。。布局就乱了。。。

chairo

Nov 2, 2012

@yibin001 反正我的做法是有个脚本抓取图片时候就获得图片宽高，然后显示时候宽高按比例放大或者缩小。不需要$content.imagesLoaded一样可以做到页面不乱……

yibin001

Nov 2, 2012

@AlloVince 去掉那一层有所改观了～～
不知道pinsta.me是怎么弄的，看不出来～

yibin001

Nov 2, 2012

@chairo 图片高宽我已经都指定了，不知道是不是跟要进行布局的dom里有其它元素有关，如不确定高度的评论列表。。。

momou

Nov 3, 2012

用@mufeng 的iphoto主题。。。

yibin001

Nov 3, 2012

@momou
呃。。。404了

sd4399340

Nov 3, 2012

以前做过类似的项目 http://yingyong.taobao.com/show.htm?app_id=125002 （需要淘宝登陆）

布局用的 isotope http://isotope.metafizzy.co/ 貌似跟Masonry差不多
图片的预加载用的jquery的一个preloader插件，原理大概是不停的去check图片的comlete属性

momou

Nov 3, 2012

@yibin001 别的地方应该还有。。。