瀑布流外掛程式|jquery.masonry|使用demo

標籤：des   style   blog   http   io   color   ar   使用   sp   

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 );
        });
}
);

瀑布流外掛程式|jquery.masonry|使用demo