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


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 流畅动画实现原理
Sep 08 Javascript
js电话号码验证方法
Sep 28 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 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的FTP学习(三)
2006/10/09 PHP
PHP 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
Smarty模板语法详解
2019/07/20 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
实现无刷新联动例子汇总
2015/05/20 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
js 作用域和变量详解
2017/02/16 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
Python中的random()方法的使用介绍
2015/05/15 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
python如何停止递归
2020/09/09 Python
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
2014年大学生就业规划书
2014/04/04 职场文书
股份合作协议书范本
2014/04/14 职场文书
学校安全管理责任书
2014/07/23 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
实习单位鉴定意见
2015/06/04 职场文书
离婚协议书范文2016
2016/03/18 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
Go归并排序算法的实现方法
2022/04/06 Golang