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


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 开天辟地入门篇一
Dec 09 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
JS中跳出循环的示例代码
Sep 14 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
如何用JS实现网页瀑布流布局
Apr 24 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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
php笔记之:php数组相关函数的使用
2013/04/26 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
Node.js文件操作详解
2014/08/16 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
python3.5使用tkinter制作记事本
2016/06/20 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
django celery redis使用具体实践
2019/04/08 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
STP的判定过程
2012/10/01 面试题
职业生涯规划书基本格式
2014/01/06 职场文书
遗嘱继承公证书
2014/04/09 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
《包身工》教学反思
2016/02/23 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
变长双向rnn的正确使用姿势教学
2021/05/31 Python