jQuery Masonry瀑布流插件_jquery网页瀑布流布局插件例子
2014-09-14 10:50:22  By: shinyuu

• shinyuu
• JQuery教程
• 0
• 7132
• 0

相信大家看到我的 主页 应该都觉得还不错吧、我采用了现在非常流行的瀑布流方式来布局

最开始我也没有想到我的首页会在无意间做出现在流行的方式、为什么说我是无意间做出这种效果的呢

那是因为我的网站采用了响应式布局、全部都有使用CSS属性 float:left 所以看起来自然就成了瀑布流了

类似的布局、似乎一夜之间出现在国内外大大小小的网站上、比如 Pinterest (貌似是最早使用这种布局的网站了)

Mark之、蘑菇街、点点网、以及淘宝最新上线的“哇哦” 等等、通常、随着页面滚动条向下滚动、这种布局还会不断加载数据块并附加至当前尾部

所以、我们给这样的布局起了一个形象的名字 — 瀑布流式布局

如果觉得我的主页看起来还不错的话、也想做出这个效果的哥们、今天有福了

下面我给大家推荐一款非常好用的瀑布流的插件、是基于JQuery开发而成的、使用也非常简单

Masonry是一款很好用的jquery网页布局插件、它可以去掉不同高度div之间的空白、让你的网页看上去更加的整齐、漂亮

先给大家看一下我使用 jQuery Masonry 做出来的一个简单的效果图、里面的内容是随机添加的

要用的哥们可以根据自己项目的需求随意改动、非常方便的

下面是做出这种效果的 HTML 代码

<ul>
 <li class="box">
  <div class="qx_picBox">
	<img src="images/qx_pic1.jpg" width="210" height="71" />
  </div>
  <div class="qx_txt">
   <p>
   dwtedx个人博客<br />
   主题：技术圈子
   </p>
  </div>
 </li>
 <li class="box">
  <div class="qx_picBox">
	<img src="images/qx_pic2.jpg" width="210" height="71" />
  </div>
  <div class="qx_txt">
   <p>
   dwtedx个人博客<br />
   主题：技术圈子
   </p>
   <p>
   dwtedx个人博客<br />
   主题：技术圈子
   </p>
  </div>
 </li>
</ul>

下面是 JS 代码

var $container = $(´#container´);
$container.imagesLoaded(function(){
	$container.masonry({
		itemSelector: ´.box´,
		columnWidth: 12 //每两列之间的间隙为5像素
	});
});

好了、一个简单的瀑布流就做好了哈、当然在调用之前你还得引用 Masonry 的 JS 文件哈

下面我把我做的例子的源代码给大家链接: http://dwtedx.com/download.html?bdkey=s/1c0coqoo 密码: i2y7

另外我再把官方的 DEMO 演示地址给出来http://fishspotr.com/index.html

大家可以根据上面的链接下载 JS 文件和文档

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛