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插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery树插件zTree使用方法详解
May 02 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jquery实现抽奖功能
Oct 22 jQuery
如何在vue 中引入使用jquery
Nov 10 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
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
PHP sprintf()函数用例解析
2011/05/18 PHP
php的4种常见运行方式
2015/03/20 PHP
php实现RSA加密类实例
2015/03/26 PHP
详解PHP中的PDO类
2015/07/06 PHP
jQuery 表单验证扩展(三)
2010/10/20 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
电厂厂长岗位职责
2014/01/02 职场文书
企业活动策划方案
2014/06/02 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
2016年校长新年寄语
2015/08/17 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
vue3不同环境下实现配置代理
2022/05/25 Vue.js
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang