masonry插件使用

 

    最近写个pinterest网站，其中一个重要的地方就是瀑布布局的应用，找了个jquery插件<a href="http://masonry.desandro.com/">masonry</a>，后来发现美丽说网站也是用的这个。下面例子带滚动条异步加载。

引用：

 

<link rel="stylesheet" href="/statics/css/masonry-site.css" type="text/css" media="screen" />

<script type="text/javascript" src="/statics/js/jquery-1.6.2.min.js"></script>

<script type="text/javascript" src="/statics/js/masonry-site/jquery.masonry.js"></script>

<script type="text/javascript" src="/statics/js/masonry-site/jquery.infinitescroll.min.js"></script>

<!-- 解决ie不支持html5的nav标签 -->

<!--[if lt IE 9]><script src="/statics/js/html5.js"></script><![endif]-->

 

文件下载<a href="http://html5shiv.googlecode.com/svn/trunk/html5.js">html5.js</a>

HTML：

 

<div>

<section id="content">

<div id="container" class="transitions-enabled infinite-scroll clearfix">

</div>

<!-- 地址中需要有2 分页-->

<nav id="page-nav"> <a href="/collections/loadContent/2/"></a> </nav>

</section>

</div>

 

JS:

<blockquote>

var $j = jQuery.noConflict();

 

$j(function(){

var $container = $j('#container');

$j.ajaxSetup({async: false});//设置为同步

$container.load('/collections/loadContent/1/'); //通过ajax加载页面数据到container节点下   

    $container.imagesLoaded(function(){

      $container.masonry({

        itemSelector: '.box',

        columnWidth: 103,

        isFitWidth: true

      });

    });

 

    $container.infinitescroll({

      navSelector  : '#page-nav',    // selector for the paged navigation 

      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)

      itemSelector : '.box',     // selector for all items you'll retrieve

      loading: {

          finishedMsg: '已全部加载',

          img: '/statics/img/icon/6RMhx.gif'

        }

      },

      // trigger Masonry as a callback

      function( newElements ) {

        // hide new items while they are loading

        var $newElems = $j( newElements ).css({ opacity: 0 });

        // ensure that images load before adding to masonry layout

        $newElems.imagesLoaded(function(){

          // show elems now they're ready

          $newElems.animate({ opacity: 1 });

          columnWidth: 103,

          $container.masonry( 'appended', $newElems, true ); 

        });

      }

    );

});

 

AJAX加载的数据页面

 

<div class="box photo col2">

      <a href="javascript:viewBmark();" title="Stanley by Dave DeSandro, on Flickr" ><img src="/statics/img/test/a1.jpg" alt="Stanley"/></a>

      <div class="shortmsg">某某叉叉网站值得去瞅瞅,某某叉叉网站值得去瞅瞅。</div>

      <div class="blockoper"><span style="color: #999;">收藏0&nbsp;&nbsp;分享0&nbsp;&nbsp;喜欢0</span>&nbsp;&nbsp;<a href="" style='float:right;'>去瞅瞅</a></div>

      <div class="pover-init block-button">

      <div class="sharp color5" style="padding-right: 10px;padding-left: 7px;">

       <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 

       <div class="content">  

          喜欢♥

       </div>

       <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>

   </div> 

   <div class="sharp color5" style="padding-right: 10px;">

       <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 

       <div class="content">  

          收藏

       </div>

       <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>

   </div>

    <div class="sharp color5">

       <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> 

       <div class="content">  

          分享

       </div>

       <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>

   </div>        

      </div>

    </div>

 

内容只要写在<div class="box photo col2">标签下面即可，上面的配置选项中columnWidth: 103文档上用于设置每列的宽度，但我死活设置效果不对，后面在样式表中col2可以换成其它的样式

.col1 { width: 80px; }

.col2 { width: 180px; }

.col3 { width: 280px; }

.col4 { width: 380px; }

.col5 { width: 480px; }

 

.col1 img { max-width: 80px; }

.col2 img { max-width: 180px; }

.col3 img { max-width: 280px; }

.col4 img { max-width: 380px; }

.col5 img { max-width: 480px; }

现在还只做个简单的样子，后期再增加分页方面的处理。

资料：http://kayosite.com/jquery-ajax-turn-page-and-cascade-layout.html

http://blog-website.rhcloud.com/blog/?p=90

效果图：