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. Springboot Actuator之十一：actuator PublicMetrics

    前言接下来的几篇文章我们来分析一下spring-boot-actuator 中在org.springframework.boot.actuate.metrics中的代码,如图: 这里的代码不仅多,而且 ...

  2. FreeSWITCH 总体架构

    [1]总体结构 [2]代码结构目录 [3]模块简介 Applications应用 mod_abstraction – 提供了一个抽象的API调用(未来有更多功能)Provides an abstrac ...

  3. Redis Desktop Manager 0.9.3 版本下载

    因为Redis Desktop Manager作者在 0.9.4 版本之后选择对所有的安装包收费,不再提供安装包下载,但是源码依旧公开.链接:https://pan.baidu.com/s/1SXsy ...

  4. - Git常用命令 基础 总结 MD

    目录 目录 Git常用命令 帮助 help 常用操作 初始化 clone init 提交 push 暂存 更新 撤销修改 分支 branch 查看分支 创建分支 切换分支 checkout 删除分支 ...

  5. Kafka学习笔记之Kafka日志删出策略

    0x00 概述 kafka将topic分成不同的partitions,每个partition的日志分成不同的segments,最后以segment为单位将陈旧的日志从文件系统删除. 假设kafka的在 ...

  6. spring boot EnableAutoConfiguration exclude 无效

    本文链接:https://blog.csdn.net/ID19870510/article/details/79373386 首先讲一下SpringBootApplication注解源码定义为 @Ta ...

  7. SpringMVC+EasyUI实现页面左侧导航菜单

    1. 效果图展示 2. 工程目录结构 注意: webapp下的resources目录放置easyui和js(jQuery文件是另外的)                    3. 代码 index.j ...

  8. 92.vue---新手从本地项目开发到服务器线上运行爬坑。

    因为我做的是后台,所以不用做SEO 参考 本项目的定位是后台集成方案,不太适合当基础模板来进行二次开发.因为本项目集成了很多你可能用不到的功能,会造成不少的代码冗余.如果你的项目不关注这方面的问题,也 ...

  9. Java 之 Object 类

    一.Object 概述  java.lang.Object 类是 Java 语言中的根类,即所有类的父类. 在对象实例化的时候,最终找的父类就是 Object. 如果一个类没有特别指定父类,那么默认则 ...

  10. AMD规范中模块id的命名规则

    AMD 即 Asynchronous Module Definition, 中文是“ 异步模块定义”的意思. AMD 规范制定了定义模块的规则,这样模块和模块的依赖可以被异步加载. AMD 规范只定义 ...