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


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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
js 创建书签小工具之理论
Feb 25 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
深入理解javascript变量声明
Nov 20 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 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基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
PHP对象相关知识总结
2017/04/09 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
js获取ip和地区
2017/03/10 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
JS实现“全选”和"全不选"功能代码实例
2020/02/06 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
Python中处理时间的几种方法小结
2015/04/09 Python
pyqt5自定义信号实例解析
2018/01/31 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
员工工作表扬信范文
2014/01/13 职场文书
爱与责任演讲稿
2014/05/20 职场文书
支部书记四风对照材料
2014/08/28 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
四年级数学教学反思
2016/02/16 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers