瀑布流说来也流行了和很久了。我现在的品鉴网(http://photo.pinjian.net)也是用了瀑布流。而且也正好是我想转的这篇文章中的一个JS效果。
事实上,我关注这个JS效果很久了,他最初的时候是实现了div的任意组合排版。本来是用在排版上的,结果被现在引用成图片的展示了。它就是:jQuery Masonry http://masonry.desandro.com/index.html
如果你去它的网站上,你可以看到,效果那是灰常的多,不过由于仅仅是基础,你要想更好的展现,必须要基于它再做一次开发。
不得不说,http://www.21andy.com/blog/20120527/2041.html,这里收藏了很多瀑布流的,我当然也就无需再一一找寻了。
随便转上一小段重要的URL:
目前而言实现瀑布流主要有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才能完成,KISSY也有插件。
KISSY Waterfall http://docs.kissyui.com/docs/html/demo/component/waterfall/index.html
如果你有兴趣,就看看喽。我是准备将pinjian.net中的图片重新调整了。为了更好的展现。同时。。可能数据源会引用国内的,否则太卡了。当然我会新开项目。不是叫photo.pinjian.net了。黑黑