瀑布流布局并自动加载实现代码

本文介绍了流行的瀑布流布局及其在Pinterest等网站的成功应用。重点讲解了jQuery插件Masonry的使用方法,帮助开发者轻松实现瀑布流效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Pinterest使用一种新的方式布局取得成功之后,们把他叫做瀑布流,国内现有美丽说,蘑菇街,花瓣等代表的网站接下来为你介绍一个juqery的插件masonry的使用,感兴趣的你可以参考下哈

自从Pinterest使用了一种新的方式布局取得成功之后,从此互联网出现了布局潮流,我们把他叫做瀑布流!!在互联网流行起来,从国外到国内普遍存在。国内现有美丽说,蘑菇街,花瓣等代表的网站。 

瀑布流是流行一段时间了,现在网上出现了很多的插件。使用起来更是非常的方便。目前用的非常多,并且有是一个juqery的插件masonry,插件地址:http://masonry.desandro.com/ 

先使用css把一个网页按照从上到下的方式布局好。 
使用起来更是非常方便: 

我先引用好jquery文件和masonry文件,使用如下代码: 
代码如下: 
$(function(){ 
var $container = $('#container'); 
$container.imagesLoaded( function(){ 
$container.masonry({ 
itemSelector : '.content_box', 
isFitWidth: true,//// 是否可调整大小 Boolean 
isRTL:false ////使用从右到左的布局 Boolean 
}); 
}); 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值