瀑布流插件|jquery.masonry|使用demo
Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说:
瀑布流插件的一个基本使用,附上基本功能的demo
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery.masonry的跑通demo</title> <script type="text/javascript" src="http://i.tq121.com.cn/j/jquery-1.8.2.js"></script> <script src="http://i.tq121.com.cn/j/plugs/jquery.masonry.min.js"></script> <style> div div{ background:red; width:100px; margin:10px; color:#fff; padding:10px;} </style> </head><body> <div id="container"><div class="item" style=" width:100px">a a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a a</div><div class="item" style=" width:100px">a a a a a a a a a a a a a a a a a a a a a</div><div class="item" style=" width:100px">a a a a a a a a a a</div><div class="item" style=" width:100px">a a a a a a</div><div class="item" style=" width:100px">a a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a a</div><div class="item" style=" width:100px">a a a a a a a a a a a a a a a a a a a a a</div><div class="item" style=" width:100px">a a a a a a a a a a</div><div class="item" style=" width:100px">a a a a a a</div> </div><script type="text/javascript">$(function(){$('#container').masonry({// options 设置选项 itemSelector : '.item',//class 选择器 columnWidth : 240 ,//一列的宽度 Integer isAnimated:true,//使用jquery的布局变化 Boolean animationOptions:{//jquery animate属性 渐变效果 Object { queue: false, duration: 500 } },gutterWidth:0,//列的间隙 Integer isFitWidth:true,// 适应宽度 Boolean isResizableL:true,// 是否可调整大小 Boolean isRTL:false,//使用从右到左的布局 Boolean }); }); </script> </body> </html>
首先在页面中引入
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script src="jquery.infinitescroll.js"></script>
排列body中的内容:
<BODY> <div id="container">
<div class="item">a a a a a a</div>
<div class="item">a a a a a a</div>
<div class="item">a a a a a a</div>
<div class="item">a a a a a a</div>
</div>
</BODY>
在js中调用插件:
<script type="text/javascript">
$(function(){
$('#container').masonry({
// options 设置选项
itemSelector : '.item',//class 选择器
columnWidth : 240 ,//一列的宽度 Integer
isAnimated:true,//使用jquery的布局变化 Boolean
animationOptions:{
//jquery animate属性 渐变效果 Object { queue: false, duration: 500 }
},
gutterWidth:0,//列的间隙 Integer
isFitWidth:true,// 适应宽度 Boolean
isResizableL:true,// 是否可调整大小 Boolean
isRTL:false,//使用从右到左的布局 Boolean
});
});
</script>
当需要排列图片div时:
需要调用:
<script>
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
columnWidth : 240
});
});
</script>
调用masonry插件的方法格式是:$('#container').masonry( 'methodName', [optionalParameters] )
例如:
.masonry( 'appended', $content, isAnimatedFromBottom )//触发添加到container的项目的布
局.masonry( 'destroy' )// 完全移除masonry的功能 返回到元素预初始化状态
.masonry( 'layout', $items, callback )// 指定项目的布局
.masonry( 'option', options ) //设置option
.masonry( 'reloadItems' ) //重新聚合所有项目以当前的顺序
.masonry( 'reload' ) //用于预先考虑或者插入项目 .masonry( 'reloadItems' )的简化版
.masonry( 'remove', $items ) //从masonry实例或dom中移除项目
调用infinitescroll插件:
$container.infinitescroll({
navSelector : '#page-nav', //分页导航的选择器
nextSelector : '#page-nav a', //下页连接的选择器
itemSelector : '.box', //你要检索的所有项目的选择器
loading: {
finishedMsg: 'No more pages to load.',//结束显示信息
img: 'http://i.imgur.com/6RMhx.gif'//loading图片
}
},
//作为回调函数触发masonry
function( newElements ) {
// 当加载时隐藏所有新项目
var $newElems = $( newElements ).css({ opacity: 0 });
// 在添加到masonry布局之前保证图片载入
$newElems.imagesLoaded(function(){
// 现在可以显示所有的元素了
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
转载于:https://www.cnblogs.com/liujinyu/p/4098935.html
瀑布流插件|jquery.masonry|使用demo相关推荐
- ajax瀑布流插件,jQuery瀑布流无限加载插件:jquery.falless.js
慌慌张张,匆匆忙忙,为何生活总是这样? 难道说,我的理想,就是这样度过一生的时光?........... 真的是一年一年飞逝而去,而人的一生,又有几个一年? 第一个四年即将结束,得到了什么?又失去了什 ...
- html瀑布流布局layui,瀑布流插件jquery.waterfall.js 的使用
美腿图库,冲!冲!冲 $(function() { $('#div1 a').lightBox(); }); .jq22-container { margin-top: 50px; } #div1 { ...
- masonry ajax瀑布流,jquery.masonry瀑布流插件的4个使用步骤
解释:很简单,就是把下载之后的脚本文件嵌入到你想使用2.瀑布流布局样式代码 .container-fluid { padding: 20px; } .box { margin-bottom: 20px ...
- Jquery瀑布流插件wookmark
瀑布流布局在现在的网页设计里面可谓是相当的流行的,从网页到手机应用,都能见到瀑布流的身影.相比较手机应用来说,感觉网页上的瀑布流布局效果实现简单很多,因为我们有现成的jQuery插件可以用,只要稍微的 ...
- waterfall-Jquery瀑布流插件,Jquery瀑流式插件
瀑布流插件布局在目前貌似很火爆,因为自己用jquery插件比较多,便萌生了把瀑布流插件实现的想法,图片就借用迅雷UED上的那些美图吧. 预览地址:http://www.sitejs.cn/code/d ...
- html5 原生插件,前端必备插件之纯原生JS的瀑布流插件Macy.js
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦.配置也比 ...
- react 原生html 插件,纯原生JS的瀑布流插件Macy.js,前端必备插件
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂 ...
- 【瀑布流插件】vue-masonry
**最近一直在画静态页面,有个图片列表, 布局很紧凑,图片宽度一样,高度不一样, 但是效果图上都是紧挨在一起,我用普通的v-for循环加css布局, 它会以这一行最高的那张图片的高度为准, 导致图片高 ...
- 瀑布流插件vue-masonry
前言 之前其实有分享过一篇纯CSS实现瀑布流的方法: https://oliver.blog.csdn.net/article/details/126450691,但纯CSS实现的方案都不是比较好的方 ...
最新文章
- 控制台 - 网络管理之华为交换机 S系列端口限速
- 软件体系结构设计文档_一个java架构师是如何设计出一个好的架构的
- 无线端不响应键盘事件(keydown,keypress,keyup)
- 位换记号、排列测试与状态图:杂耍中的数学
- rust这么拆除钢墙_rust腐蚀如何拆墙
- mysql update修改数据_MYsql如何用update语句修改数据,值得一看
- rest-framework框架的基本组件
- 磁盘配额超出 linux,Linux磁盘配额应用
- variance和variation的区别
- 关于python3.9安装Airtest跑脚本“jinja2”报错的问题说明
- 环洋市场调研-2022年全球一次性餐具市场总体规模及应用细分研究报告
- 小米手机NFC复制门禁卡读取芯片信息失败,报错103解决办法。
- 让人变年轻的特效怎么做?教你制作变年轻特效小妙招
- php上传txt文件读取乱码
- 加利福尼亚大学计算机排名,加利福尼亚大学洛杉矶分校计算机科学专业排名第13(2020年USNEWS美国排名)...
- 病毒 (virus)
- 西安科技大学计算机专业自考,西安科技大学自学考试
- 剪切板是计算机系统,剪切板
- 八大排序算法比较及各自的特点
- 动态设置view或布局的宽高