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


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 相关文章推荐
ExtJS的拖拽效果示例
Dec 09 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
javascript 闭包详解
Feb 15 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
js实现左右轮播图
Jan 09 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
Python3实现连接SQLite数据库的方法
2014/08/23 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
python类的实例化问题解决
2019/08/31 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
python将音频进行变速的操作方法
2020/04/08 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
关于赌博的检讨书
2014/01/08 职场文书
五年级语文教学反思
2014/01/30 职场文书
大专会计自我鉴定
2014/02/06 职场文书
一份创业计划书范文
2014/02/08 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL