手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜Qcloud , 注册 | 登陆

瀑布流

首页 > Javascript >

瀑布流说来也流行了和很久了。我现在的品鉴网(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了。黑黑




本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

« 上一篇 | 下一篇 »

发表评论

评论内容 (必填):