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


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 相关文章推荐
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
JavaScript继承方式实例
Oct 29 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 Javascript
JavaScript实现左右滚动电影画布
Feb 06 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 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利用COM对象访问SQLServer、Access
2006/10/09 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
PHP7 list() 函数修改
2021/03/09 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
深入理解python多进程编程
2016/06/12 Python
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
Win8下python3.5.1安装教程
2020/07/29 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
do you have any Best Practice for testing
2016/06/04 面试题
质检部岗位职责
2013/11/11 职场文书
总经理助理的职责
2014/03/14 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
教师年度个人总结
2015/02/11 职场文书
遗愿清单观后感
2015/06/09 职场文书
新年祝酒词大全
2015/08/11 职场文书
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js