jquery.masonry瀑布流效果


Posted in jQuery onMay 25, 2017

一、分别加载jquery插件与jquery.masonry插件

<script src="js/jquery-1.8.1.min.js"></script>
<script src="js/jquery.masonry.min.js"></script>

二、瀑布流局部样式代码

.container-fluid {
 padding: 20px;
}
.box {
 margin-bottom: 20px;
 float: left;
 width: 220px;
}
.box img {
 max-width: 100%
}

解释:针对第二步的页面代码,我们需要添加一点样式,.box 类我们添加了浮动属性,还设置了他的宽度。

三、页面瀑布流布局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>
</div>

解释:把每个小内容块放在一个拥有相关类的容器里,然后把所有的内容块放在一个大的容器里,这里我们把内容块图片放在一个拥有 .box 类的 <div> 标签里,然后把他们又使用带有 #masonry ID 的 <div> 里面,一会儿我们会用 #masonry ID 和 .box 类来触发使用瀑布流。

四、初始化瀑布流插件的jquery脚本代码

$(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, 这行代码可以打开动画选项,也就是当改变窗口宽度的时候,每行显示的内容块的数量会有变化,这个变化会使用一种动画效果。

demo下载地址 瀑布流

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
jQuery实现查看图片功能
Dec 01 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 #jQuery
jquery Form轻松实现文件上传
May 24 #jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 #jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 #jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 #jQuery
jquery append与appendTo方法比较
May 24 #jQuery
jQuery日期范围选择器附源码下载
May 23 #jQuery
You might like
php基础知识:控制结构
2006/12/13 PHP
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
JS解密入门之凭直觉解
2008/06/25 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
js document.write()使用介绍
2014/02/21 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
Python 多线程Threading初学教程
2017/08/22 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
python计算auc的方法
2020/09/09 Python
Python中qutip用法示例详解
2020/10/02 Python
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
实习生自荐信范文分享
2013/11/27 职场文书
领导班子四风表现材料
2014/08/23 职场文书
校长创先争优承诺书
2014/08/30 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
先进党支部申报材料
2014/12/24 职场文书
2015年维修工作总结
2015/04/25 职场文书
我爱我班主题班会
2015/08/13 职场文书