我向大家推荐下Isotope这个jQuery插件,可以用它来创建动态和智能布局,尤其是现在主流的【瀑布流】形式,非常方便。你可以隐藏和显示与过滤项目,重新排序和整理甚至更多。同时Isotope还有许多很酷的动画,尤其是chrome下的表现非常棒,因为支持CSS3的动画效果很好。当然你也可以设置,动画引擎为jquery,chrome下依然表现很棒。而且IE兼容的很好,都是使用渐隐渐显的形式。
当然此插件在使用中也有些问题,比如:现在流行的瀑布流,当模块中含有图片的话,最好是将图片的宽高写在img标签上,否则的话,会出现模块重叠的情况。HTML直接显示的话比较少见,如果是AJAX动态调取数据然后显示的话,就会出现重叠。虽然它代码里写有加载图片的方法,但加载图片后,计算模块位置上好像是有点问题,或者是加载没完成,就计算好位置,导致重叠了。
不过除了这个问题,其他的布局和使用都非常的好,推荐给大家。其他的大家去官网看文档,就会了,不多说了。
官网地址:http://isotope.metafizzy.co/
项目中应用的瀑布流截图: