您的位置:首页> 日志> 动易系统 正文

1. 加载jQuery库、masonry插件

...

 

2.调整好布局样式后,应用masonry插件实现瀑布流布局

设置好子元素的尺寸样式,使其宽度适应页面布局即可,设置好样式好应用 masonry 插件即可自动将目标元素自动转换为绝对定位并设置好位置坐标。

要注意的是内容其中如果包含图片的话,必须等待图片加载完成,或显示给图片设定尺寸宽度,让需要布局的元素呈现其“最终”的尺寸,避免内容未加载完就进行布局,导致内容加载出来之后元素重叠。(masonry本身包含 imagesLoaded 扩展,可以判断元素内部图片加载完成后执行动作。)

 

3.滚动加载

参照插件其本身提供的demo例子,需要到另一个插件 infinitescroll 即可以轻松实现滚动加载功能。 其中需要设置参数 navSelector : 页码选择器, nextSelector : “下一页”链接选择器, itemSelector : 加载内容选择器, loading : 加载设置。 如页面代码结构:

  <div id="list">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      ...
  </div>
  <div id="page">
      <a href="Index.aspx">上一页</a>
      <span class="current">1</span>
      <a href="Index_2.aspx">2</a> 
      <a href="Index_2.aspx">下一页</a>
  </div></p>

需要的设置为:

  $container.infinitescroll({
    navSelector: '.page',
    nextSelector: '.current+a',
    itemSelector: '.item',
    loading: {
        msgText: '正在加载内容...',
        finishedMsg: '没有更多内容',
        img: '/Template/founderResource/Skin/images/loading.gif'
    }
}

即可。

 

【参考网址】