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


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 相关文章推荐
JavaScript Konami Code 实现代码
Jul 29 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Nov 22 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
js实现下拉框二级联动
Dec 04 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
JS使用for in有序获取对象数据
May 19 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调用数据库的存贮过程!
2006/10/09 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
Vue header组件开发详解
2018/01/26 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
无房证明范本
2014/09/17 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
预备党员转正党小组意见
2015/06/01 职场文书