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

瀑布流插件|jquery.masonry|使用demo的更多相关文章

  1. jQuery瀑布流插件——jQuery.Waterfall

    插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计 ...

  2. 瀑布流插件（jquery.masonry.js）

    什么是瀑布流?去看看Pinterest(这才是鼻祖),Mark之,蘑菇街,点点网,还有腾讯的微博广场吧.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部. Masonry是一款很好用的jqu ...

  3. jQuery动态网格瀑布流插件Masonry

    Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...

  4. jquery.masonry瀑布流插件的4个使用步骤

    1.分别加载jquery插件与jquery.masonry插件两个文件 下载jquery插件:http://jquery.com也可以引用google的cdn外部jquery核心库JS文件下载jque ...

  5. jQuery瀑布流插件masonry

    项目要做荣誉证书的排版,宽度是统一的,但是高度不一致 采用瀑布流的效果来实现 默认先实现前15张,点击按钮再加载全部剩下的数据 效果图 首先是html部分,写好样式 <!-- 荣誉资质 --&g ...

  6. 8款实用的Jquery瀑布流插件

    1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...

  7. jQuery插件之-瀑布流插件

    jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...

  8. 利用jQuery来扩展一个瀑布流插件

      简单了解jQuery.fn.extend() jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法). (截图来自jQuery文档) 为了更清晰 ...

  9. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

随机推荐

  1. linux中用一个.sh文件执行多个.sh文件

      建一个文件夹存放你自己的.sh文件(用命令行操作) 先进入到: cd usr/local/sbin 目录里面 然后再新建一个文件夹: sudo mkdir myshell 建一个文件夹专门存放自己 ...

  2. Linux命令中service的用法

    用途说明 service命令用于对系统服务进行管理,比如启动(start).停止(stop).重启(restart).查看状态(status)等.相关的命令还包括chkconfig.ntsysv等,c ...

  3. Oulipo 子串查找

    题目描述 思路 使用哈希值表示较长串的子串的值,直接比较哈希值是否相等 代码 #include <cstdio> #include <cstring> using namesp ...

  4. Java随堂笔记二

    变量常量类型转换和命名规范 变量和常量 static double salary = 2500;​    //属性:变量    //变量作用域:    //类变量 static    // 局部变量 ...

  5. LINUX 下.NET Core 微服务部署实战

    前言 最近一直在开发部署.也没有总结一下.从5月份开始出差到现在基本没有发过博客,哎,惭愧. 一直在弄微服务,后续会慢慢更新下面这个系列.欢迎各位大佬交流指点. 分布式理论专题 1..net core ...

  6. 使用HttpClient访问接口（Rest接口和普通接口）

    这里总结一下使用HttpClient访问外部接口的用法.后期如果发现有什么缺陷会更改.欢迎读者指出此方法的不足之处. 首先,创建一个返回实体: public class HttpResult { // ...

  7. ssh in depth

    前两天写了一篇关于ssh的相对比较入门的文章,重点介绍了ssh在免密登录场景下的应用. 本文试图对ssh更高级的话题做一下探讨,重点探讨一下ssh tunneling https://www.ssh. ...

  8. English--consonant_摩擦音

    consonant_摩擦音_[f]和[v].[s]和[z].[∫]和[ʒ] 摩擦音:理论上可以无限延长气流. [f]:噘嘴,上牙咬住下唇,送气,通过气流摩擦发音,声带不震动.knife.food.le ...

  9. 英文INSURAUNCE保险INSURAUNCE词汇

    世界保险INSURAUNCE 人类社会从开始就面临着自然灾害和意外事故的侵扰,在与大自然抗争的过程中,古代人们就萌生了对付灾害事故的保险思想和原始形态的保险方法.公元前2500年前后,古巴比伦王国国王 ...

  10. DataPipeline CTO陈肃：构建批流一体数据融合平台的一致性语义保证

    文 | 陈肃 DataPipelineCTO 交流微信 | datapipeline2018 本文完整PPT获取 | 关注公众号后,后台回复“陈肃” 首先,本文将从数据融合角度,谈一下DataPipe ...