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

更新时间：2013年03月12日 17:27:05 作者：

Pinterest使用一种新的方式布局取得成功之后，们把他叫做瀑布流，国内现有美丽说，蘑菇街，花瓣等代表的网站接下来为你介绍一个juqery的插件masonry的使用，感兴趣的你可以参考下哈

自从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 
}); 
}); 

您可能感兴趣的文章:

jQuery鼠标事件总结
鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,有需要的朋友来了解一下。
2016-10-10
让checkbox不选中即将选中的checkbox不选中
把选中的checkbox置空，即将选中的checkbox不选中，实现的方法很多，下面为大家分享个不错可行，已测试的好方法，希望对大家有所帮助
2014-07-07
jQuery实现的右下角广告窗体跟随效果示例
这篇文章主要介绍了jQuery实现的右下角广告窗体跟随效果,涉及jQuery结合时间函数动态操作页面元素属性的相关技巧,需要的朋友可以参考下
2016-09-09
jquery.multiselect多选下拉框实现代码
这篇文章主要为大家详细介绍了jquery.multiselect 多选下拉框实现代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
jQuery表单元素过滤选择器用法实例分析
这篇文章主要介绍了jQuery表单元素过滤选择器用法,结合实例形式分析了jQuery表单元素过滤选择器针对表单元素匹配相关操作技巧,需要的朋友可以参考下
2019-02-02
基于JQuery的Ajax方法使用详解
下面小编就为大家带来一篇基于JQuery的Ajax方法使用详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
由于分页的效果却又是非常令人厌恶的。滚动条无疑是一种简单而又高效的一种方式。而这里，处于对用户体验的考虑，我使用Jquery实现了一种类似滚动停靠的效果，感兴趣的朋友可以参考下哈
2013-03-03
jQuery中[attribute*=value]选择器用法实例
这篇文章主要介绍了jQuery中[attribute*=value]选择器用法,实例分析了[attribute*=value]选择器的功能、定义及匹配给定的属性包含某些值的元素的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2014-12-12
jQuery中$(function() {});问题详解
$(function() {});是$(document).ready(function(){ })的简写，最早接触的时候也说$(document).ready(function(){ })这个函数是用来取代页面中的window.onload;但是今天发现好像不是这样回事！是在做一个页面载入效果时发现的！
2015-08-08
jQuery中prependTo()方法用法实例
这篇文章主要介绍了jQuery中prependTo()方法用法,实例分析了prependTo()方法的功能、定义及匹配的元素插入指定元素之前的使用技巧,需要的朋友可以参考下
2015-01-01