首页 » 技术分享 » 图片墙瀑布式加载图片方法

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

 

像嘀咕网一样,图片和回复异步以图片墙的方式加载到页面的方法。需要引入附件中的包:

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

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

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

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

加载第二页时,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">

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

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

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

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

加载新的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 );
            });
          }
        );
    });

其中一些参数是可变的

工具包下载地址:

http://download.csdn.net/detail/aaa1117a8w5s6d/4468994

转载自原文链接, 如需删除请联系管理员。

原文链接:图片墙瀑布式加载图片方法,转载请注明来源!

0