热门关键字：
> jquery.masonry瀑布流插件的4个使用步骤
jquery.masonry瀑布流插件的4个使用步骤
作者：管理员发布时间： 9:35:36评论数：1
转载请自觉注明原文：
1、分别加载与插件两个文件
下载插件：/
加载代码：
&script src="js/jquery-1.8.1.min.js"&&/script&
&script src="js/jquery.masonry.min.js"&&/script&
解释：很简单，就是把下载之后的脚本文件嵌入到你想使用形式的页面中，注意文件的名称与路径，根据你自己的实际情况修改。
2、布局样式代码
.container-fluid {
padding: 20
margin-bottom: 20
width: 220
.box img {
max-width: 100%
解释：针对第二步的页面代码，我们需要添加一点样式，.box 类我们添加了浮动属性，还设置了他的宽度。
3、页面布局html代码
&div id="masonry" class="container-fluid"&
&div class="box"&&img src="images/1.jpg"&&/div&
&div class="box"&&img src="images/2.jpg"&&/div&
&div class="box"&&img src="images/3.jpg"&&/div&
&div class="box"&&img src="images/4.jpg"&&/div&
&div class="box"&&img src="images/5.jpg"&&/div&
解释：把每个小内容块放在一个拥有相关类的容器里，然后把所有的内容块放在一个大的容器里，这里我们把内容块图片放在一个拥有 .box 类的 &div& 标签里，然后把他们又使用带有 #masonry ID 的 &div& 里面，一会儿我们会用 #masonry ID 和 .box 类来触发使用。
4、初始化插件的脚本代码
$(function(){
var $container = $('#masonry');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.box',
gutterWidth : 20,
isAnimated: true,
解释：这里我们首先定位想使用瀑布流的大容器是什么，这里就是带有 #masonry ID 的 &div& 标签，在 var $container = $('#masonry'); 这行代码中定义。然后我们还要说明瀑布流里的每个内容块容器上共同的类是什么，这里就是带有 .box 类的 &div& 标签，在itemSelector : '.box', 这行代码中定义。
gutterWidth : 20, 这行代码定义了内容块之间的距离是 20 像素，isAnimated: true, 这行代码可以打开动画选项，也就是当改变窗口宽度的时候，每行显示的内容块的数量会有变化，这个变化会使用一种动画效果。
相关案例演示和下载:
如果您觉得本文的内容对您的学习有所帮助：
相关文章：jQuery瀑布流插件Wookmark使用实例
字体：[ ] 类型：转载 时间：
Wookmark jQuery插件大致使用position:absolute来重构内容实现瀑布流布局,需要的朋友可以参考下
插件下载：/GBKS/Wookmark-jQuery官方主页：/jquery-plugin
下载插件后，在网页中引用插件的JS文件： 代码如下:&script src="jquery-1.8.2.min.js"&&/script&&script src="jquery.wookmark.min.js"&&/script&HTML代码结构： 代码如下:&div id="main"&&&ul id="tiles"&&&&li&&img src="images/1.jpg"&&/li&&&&li&&img src="images/2.jpg"&&/li&&&&li&&img src="images/3.jpg"&&/li&&&/ul&&/div&简单用法：在html文件中添加代码 代码如下:&script&&jQuery(function($){&&$('#tiles li').wookmark();&});&/script&复杂一点的用法： 代码如下:&script&jQuery(function($){&$('#tiles li').wookmark({ //这里是要实现瀑布流布局的对象&&autoResize: true, //设置成true表示当window窗口大小改变的时候，重新布局&&container: $('#container'), //这个是容器名称 这个容器要必须包含一个css属性"position:relative" 否则你就会看到全部挤在页面的左上角了&&offset: 12, //2个相邻元素之间的间距&&itemWidth: 222, //指定对象的宽度&&resizeDelay: 50 //这是延时效果 默认是50&});});&/script&wookmark同样也可以配合ajax来实现动态加载数据，不过新增之后需要重新执行一次。 代码如下:var handler = $('#tiles li');handler.wookmark(options);如果你在前面已经绑定了事件，在重新执行之前，先清除一下。 代码如下:handler.wookmarkClear();看到比较多人在问滚动加载是怎么用的，弄个实例补充说明下： 代码如下:var handler =//定义基本属性.var options = {&&& autoResize: true,&&& container: $('#main'),&&& offset: 2,&&& itemWidth: 210};//定义滚动函数function onScroll(event) {&&& //是否到底部（这里是判断离底部还有100px开始载入数据）.&&& var closeToBottom = ($(window).scrollTop() + $(window).height() & $(document).height() - 100);&&& if(closeToBottom) {&&&&&&& //这里就是AJAX载入的数据&&&&&&& $.ajax({url:"data.html", dataType:"html", success:function(html){&&&&&&&&&&& //把新数据追加到对象中&&&&&&&&&&& $('#waterfall').append(html);&&&&&&&&&&& //清除原来的定位&&&&&&&&&&& if(handler) handler.wookmarkClear();&&&&&&&&&&& //创建新的wookmark对象&&&&&&&&&&& handler = $('#waterfall li');&&&&&&&&&&& handler.wookmark(options);&&&&&&&&&&& }&&&&&&& });&&& }};$(document).ready(new function() {&&& //绑定scroll事件.&&& $(document).bind('scroll', onScroll);&&& //第一次布局.&&& handler = $('#waterfall li');&&& handler.wookmark(options);});
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具没有使用任何插件，完全使用原生JavaScript写的瀑布流插件，响应式布局，自动排列，代码也简洁明了。
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）