图片墙瀑布式加载图片方法

1、图片和回复异步以图片墙的方式加载到页面的方法。需要引入附件中的包：

首先在photo.html中显示第一页的内容，图片墙的最外面要有如下div

<div style="visibility: visible; position: relative; " id="container" class="waterfall_wrap masonry">

2、然后内部的每一个图片单元都要在<div class="pin layoutBox masonry-brick">内部。

js包会自动识别pin的类来进行检测。

3、加载第二页时，js会识别<nav id="page-nav"> <a href="page2.html"></a> </nav>（这个标签放哪里都可以）

然后查到href属性，把里面的数值自动加1进行触发，加载里面的内容。

当然page2.html里面的内容也是有要求的，最外层div要是：<div style="visibility: visible; position: relative; " id="container" class="waterfall_wrap masonry">

4、然后里面的单元也要是<div class="pin layoutBox masonry-brick">。

在href里是不能调用javascript函数的，要是想触发action异步把数据加载上来，

在href属性里写上action的名字，如：/zone/myphotoPage.action?pager.offset=2

js会自动把里面的数字加1进行触发。

5、加载新的div时会触发如下函数：

$container.infinitescroll({

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

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

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

          extraScrollPx: 50,

          animate      : true,        //设置动画效果

          loading: {

              finishedMsg: '已经没有下页了.',

              img: '${baseUploadHome}/system/6RMhx.gif'

            }

          },

          // trigger Masonry as a callback

          function( newElements ) {

            // hide new items while they are loading

            var $newElems = $( 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 });

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

            });

          }

        );

    });

6、其中一些参数是可变的