瀑布流插件|jquery.masonry|使用demo

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

来源：https://www.cnblogs.com/liujinyu/p/4098935.html

标签

瀑布流

masonry