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


Posted in Javascript onMarch 12, 2013

自从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 
}); 
});
Javascript 相关文章推荐
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
ajax异步请求详解
Jan 06 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
Vue form表单动态添加组件实战案例
Sep 02 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 #Javascript
P3P Header解决Cookie跨域的问题
Mar 12 #Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 #Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 #Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 #Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 #Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 #Javascript
You might like
php笔记之:php数组相关函数的使用
2013/04/26 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
php解析xml方法实例详解
2015/05/12 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
python实现矩阵乘法的方法
2015/06/28 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
卫校护理专业毕业生求职信
2013/11/26 职场文书
财务会计人员岗位职责
2013/11/30 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
老兵退伍标语
2014/10/07 职场文书
党员民主评议个人总结
2014/10/20 职场文书
求职意向书范本
2015/05/11 职场文书
八年级语文教学反思
2016/03/03 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书