瀑布流布局(Waterfall Layout),听到这个名词你不一定知道是什么,但是你看了下面的图片就会明白了。很多网站都用它来展示图片内容,比如淘宝哇哦、新浪轻博客等。
今天我要分享给大家的就是怎么轻松来搞定瀑布流布局。当然,我不会自己从零开始,要学会重复利用别人的东西,不要重新发明轮子。如果要看本文最新版本,请访问:http://www.vktone.com/articles/waterfall-layout-use-jquery-masonry.html 。(友情提示:本文内容在ITEYE上显示有点乱,最好访问这个地址看)
我用到的就是jQuery的Masonry插件,它是一个用来布局的jQuery插件。配置Masonry相当容易,只需要在jQuery脚本中的 wrapping container元素中加上.masonry()方法。官网地址:http://masonry.desandro.com/index.html 。
废话少说,下面来一步一步展示如何实现瀑布流布局,这个已经在www.vktone.com 博客右侧边栏中用到了。
第一步: 就是要把显示图片的html容器准备好,比如像下面这样
<div id="imgcontainer"> <div class="imgitem">...</div> <div class="imgitem">...</div> <div class="imgitem">...</div> ... </div>
注意:<div class= "imgitem" > ...</div>
里面装的就是你要显示的图片,也可以是带链接的图片,也可以是图片和文字的混合体。
第二步:加入jQuery和jQuery Masonry插件。
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery.masonry.min.js"></script>
其中,jQuery下载地址:http://jquery.com/, jQuery Masonry下载地址:http://masonry.desandro.com/jquery.masonry.min.js
第三步: 添加css样式,特别注意要添加 float:left,其它的样式自行调整(比如添加边框border,边距margin等)。
.imgitem { /* width: 70px; */ margin: 2px; float: left; border: solid 1px #ccc; -webkit-transition: all .7s ease-out .1s; -moz-transition: all .7s ease-out; -o-transition: all .7s ease-out .1s; transition: all .7s ease-out .1s; }
第四步: 添加JavaScript脚本
<script type="text/javascript"> //<![CDATA[ function masonryImages(){ var $container = $('#imgcontainer'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector : '.imgitem' //,columnWidth: 72 }); }); } $(function(){ masonryImages(); }); //]]> </script>
注意:如果显示图片的html是ajax动态加载的,加载完之后应该调用masonry()重新布局,否则有点乱。比如下面的代码,在加载完之后调用了masonryImages()。
$.ajax({ url: "...", type: "post", data: { ... }, dataType: "jsonp", success: function(rsp){ if (rsp && rsp.data && rsp.data.html) { $("#sidebar").replaceWith(rsp.data.html); masonryImages(); } }, error: function(){ $("#sidebar").text("加载侧边失败!"); } });
大功告成! 用jQuery Masonry插件实现瀑布流布局就完成了,轻松吧!
- 源文【四步轻松搞定瀑布流布局】最新版,请访问:
http://www.vktone.com/articles/waterfall-layout-use-jquery-masonry.html
相关推荐
最新 最好最优秀的web布局方式 源码 可定制 一起让用户体验飞起来
自定义布局类,轻松搞定UICollectionView瀑布流形式布局,简单好看,
c++语言讲义,帮助你轻松搞定C++,欢迎大家下载
关于瀑布流分割线的设置,分分钟搞定
Cisco IOS升级6步轻松搞定 Cisco IOS升级6步轻松搞定
Fedora 11下7步轻松搞定LAMP安装
【】轻松搞定网页设计(html css js)第0- 1讲【】轻松搞定网页设计(html css js)第2讲【】轻松搞定网页设计(html css js)第3讲【】轻松搞定网页设计(html css js)第4-5讲【】轻松搞定网页设计(html css js)第6-7讲...
轻松搞定听力轻松搞定听力轻松搞定听力轻松搞定听力
六步轻松搞定子网划分.docx
轻松搞定xml 轻松搞定xml 轻松搞定xml 轻松搞定xml 轻松搞定xml 轻松搞定xml 轻松搞定xml
北大青鸟 李赞红老师 轻松搞定ExtJS 实例 源代码
轻松搞定网页设计html+css+javascript 内容介绍 该教程用循序渐进的手法和项目驱动的案例,由浅入深的讲解网页设计的基础部分和高级部分,包括以下内容: 1、html详解; 2、css(块级元素、行内元素、标准流盒子模型...
div布局轻松搞定,轻松调用这布局你的网页
教程名称:韩顺平 轻松搞定网页设计课程目录:【】轻松搞定网页设计(html css javascript) 第37讲【】轻松搞定网页设计(html css javascript) 第38讲【】轻松搞定网页设计(html css javascript) ...
轻松搞定js教程轻松搞定js教程轻松搞定js教程轻松搞定js教程
只需3步轻松搞定win7无线网络共享设置的方法.docx
黑马程序员c++配套课件 《轻松搞定c++语言》 黑马程序员c++配套课件 《轻松搞定c++语言》
轻松搞定C++语音pdf带标签。
《轻松搞定XML中文版》,作者:Michael J.Young,翻译:林嘉胜,16开,588页。文档格式为RAR,无密码。
extjs 轻松搞定EXTJS.pdf +很多DEMO 高清 高质量 案例