瀑布流插件|jquery.masonry|使用demo
Maonsry+Infinite-Scroll實(shí)現(xiàn)滾動(dòng)式分頁(yè)，網(wǎng)上有很多，這里只說(shuō)：
瀑布流插件的一個(gè)基本使用，附上基本功能的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 設(shè)置選項(xiàng) itemSelector : '.item',//class 選擇器 columnWidth : 240 ,//一列的寬度 Integer isAnimated:true,//使用jquery的布局變化 Boolean animationOptions:{//jquery animate屬性 漸變效果 Object { queue: false, duration: 500 } },gutterWidth:0,//列的間隙 Integer isFitWidth:true,// 適應(yīng)寬度 Boolean isResizableL:true,// 是否可調(diào)整大小 Boolean isRTL:false,//使用從右到左的布局 Boolean }); }); </script> </body> </html>?首先在頁(yè)面中引入
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script src="jquery.infinitescroll.js"></script>
排列body中的內(nèi)容:
<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中調(diào)用插件：
<script type="text/javascript">
? $(function(){
??? $('#container').masonry({
????? // options 設(shè)置選項(xiàng)
????? itemSelector : '.item',//class 選擇器
????? columnWidth : 240 ,//一列的寬度 Integer
????????? isAnimated:true,//使用jquery的布局變化? Boolean
????????? animationOptions:{
??????????? //jquery animate屬性 漸變效果? Object { queue: false, duration: 500 }
????????? },
????????? gutterWidth:0,//列的間隙 Integer
????????? isFitWidth:true,// 適應(yīng)寬度?? Boolean
????????? isResizableL:true,// 是否可調(diào)整大小 Boolean
????????? isRTL:false,//使用從右到左的布局 Boolean
? });
});
</script>
當(dāng)需要排列圖片div時(shí)：
需要調(diào)用：
<script>
var $container = $('#container');
$container.imagesLoaded(function(){
? $container.masonry({
??? itemSelector : '.item',
??? columnWidth : 240
? });
});
</script>
調(diào)用masonry插件的方法格式是：$('#container').masonry( 'methodName', [optionalParameters] )
例如：
.masonry( 'appended', $content, isAnimatedFromBottom )//觸發(fā)添加到container的項(xiàng)目的布
局.masonry( 'destroy' )// 完全移除masonry的功能 返回到元素預(yù)初始化狀態(tài)
.masonry( 'layout', $items, callback )// 指定項(xiàng)目的布局
.masonry( 'option', options ) //設(shè)置option
.masonry( 'reloadItems' ) //重新聚合所有項(xiàng)目以當(dāng)前的順序
.masonry( 'reload' ) //用于預(yù)先考慮或者插入項(xiàng)目 .masonry( 'reloadItems' )的簡(jiǎn)化版
.masonry( 'remove', $items ) //從masonry實(shí)例或dom中移除項(xiàng)目
調(diào)用infinitescroll插件：
$container.infinitescroll({
??????? navSelector : '#page-nav', //分頁(yè)導(dǎo)航的選擇器
??????? nextSelector : '#page-nav a', //下頁(yè)連接的選擇器
??????? itemSelector : '.box', //你要檢索的所有項(xiàng)目的選擇器
??????? loading: {
??????????????? finishedMsg: 'No more pages to load.',//結(jié)束顯示信息
??????????????? img: 'http://i.imgur.com/6RMhx.gif'//loading圖片
??????? }
},
//作為回調(diào)函數(shù)觸發(fā)masonry
function( newElements ) {
// 當(dāng)加載時(shí)隱藏所有新項(xiàng)目
??????? var $newElems = $( newElements ).css({ opacity: 0 });
// 在添加到masonry布局之前保證圖片載入
??????? $newElems.imagesLoaded(function(){
// 現(xiàn)在可以顯示所有的元素了
??????? $newElems.animate({ opacity: 1 });
??????? $container.masonry( 'appended', $newElems, true );
??????? });
}
);
轉(zhuǎn)載于:https://www.cnblogs.com/liujinyu/p/4098935.html
總結(jié)
以上是生活随笔為你收集整理的瀑布流插件|jquery.masonry|使用demo的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 有趣的Web版Ubuntu Linux
- 下一篇： 重新定义旅游网站，米胖新版发布