jquery.masonry瀑布流效果

一、分别加载jquery插件与jquery.masonry插件

<script src="js/jquery-1.8.1.min.js"></script>
<script src="js/jquery.masonry.min.js"></script>

二、瀑布流局部样式代码

.container-fluid {
 padding: 20px;
}
.box {
 margin-bottom: 20px;
 float: left;
 width: 220px;
}
.box img {
 max-width: 100%
}

解释：针对第二步的页面代码，我们需要添加一点样式，.box 类我们添加了浮动属性，还设置了他的宽度。

三、页面瀑布流布局html代码

<div id="masonry" class="container-fluid">
 <div class="box"><img src="images/1.jpg"></div>
 <div class="box"><img src="images/2.jpg"></div>
 <div class="box"><img src="images/3.jpg"></div>
 <div class="box"><img src="images/4.jpg"></div>
 <div class="box"><img src="images/5.jpg"></div>
</div>

解释：把每个小内容块放在一个拥有相关类的容器里，然后把所有的内容块放在一个大的容器里，这里我们把内容块图片放在一个拥有 .box 类的 <div> 标签里，然后把他们又使用带有 #masonry ID 的 <div> 里面，一会儿我们会用 #masonry ID 和 .box 类来触发使用瀑布流。

四、初始化瀑布流插件的jquery脚本代码

$(function(){
 var $container = $('#masonry');
 $container.imagesLoaded( function(){
  $container.masonry({
   itemSelector : '.box',
   gutterWidth : 20,
   isAnimated: true,
  });
 });
});

解释：这里我们首先定位想使用瀑布流的大容器是什么，这里就是带有 #masonry ID 的 <div> 标签，在 var $container = $('#masonry'); 这行代码中定义。然后我们还要说明瀑布流里的每个内容块容器上共同的类是什么，这里就是带有 .box 类的 <div> 标签，在itemSelector : ‘.box', 这行代码中定义。gutterWidth : 20, 这行代码定义了内容块之间的距离是 20 像素，isAnimated: true, 这行代码可以打开动画选项，也就是当改变窗口宽度的时候，每行显示的内容块的数量会有变化，这个变化会使用一种动画效果。

demo下载地址 瀑布流

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery Masonry瀑布流插件使用详解

    jQuery Masonry瀑布流插件使用详解

    Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果.和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排列,使用Masonry则垂直排列元素,然后将下一个元素放置到网格中的下一个开发区域.这种效果可以最小化处理 不同高度的元素在垂直方向的间隙.如下: 在上图中大家可以看到,在网格布局中使用float来处理不同高度的元素会使得垂直方向的元素间间隔比较大,而使用Masonry处理后,间隔变小. 用法 首先倒入类库,

  • jQuery.lazyload+masonry改良图片瀑布流代码

    实现方法如下:(这里只发jquery了,相关html代码请各位自己脑补一下吧,我就不发了,哈哈) /** * 自动刷新 * @type {*|jQuery|HTMLElement} */ var $container = $('#main'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.item', columnWidth:205, gutterWidth:10, isAnimated:

  • jQuery Masonry瀑布流布局神器使用详解

    jQuery Masonry瀑布流布局神器使用详解

    最近在做个网站时,其中有一部分涉及到很多图片布局,想采用比较流行的Water Flow布局. 开始的时候自己动手写的,真费事情,没有考虑检测图片大小,虽然也能达到布局效果,但是图片有的本身尺寸比较小却被强行拉大了,看起来很不和谐.后来上网收了一下,原来有很好的Water Flow布局工具使用.下面来认识一下这个神器吧~ 神器名称:JQuery Masonry , 网址:http://masonry.desandro.com/index.html 使用方法相当简单: 1.标记需要布局的容器和Ite

  • jQuery Masonry瀑布流插件使用方法详解

    jQuery Masonry瀑布流插件使用方法详解

    用jQuery Masonry 插件创建瀑布流式的页面 我们可以使用 jQuery 的 Masonry 插件来实现这种页面形式,下面介绍一下方法. 1.分别下载 jQuery 与 Masonry ,然后把他们都加载到页面中使用. 加载代码: <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <script src="http://jq22.qiniud

  • jquery.masonry瀑布流效果

    一.分别加载jquery插件与jquery.masonry插件 <script src="js/jquery-1.8.1.min.js"></script> <script src="js/jquery.masonry.min.js"></script> 二.瀑布流局部样式代码 .container-fluid { padding: 20px; } .box { margin-bottom: 20px; float:

  • jquery实现瀑布流效果分享

    使用jquery实现瀑布流效果,大家参考使用吧,运行后可以看到效果,代码中的JQ引入一定要换成自己的才好 复制代码 代码如下: <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>AJAX</title> <link rel="stylesheet" href="boot

  • jquery实现瀑布流效果 jquery下拉加载新数据

    jquery实现瀑布流效果 jquery下拉加载新数据

    瀑布流效果在很多网站还是有的,这种错落有致的排布看着还是很不错的呢.今天我就来记录一下关于用jquery实现瀑布流效果的代码: 一.页面基本排版 1. items盒子主要用来存放我们需要摆放的数据item: 2. tips是页面加载数据的时候用来提示用户的文本: <div class="wrapper"> <div class="items"> <div class="item"></div> &l

  • PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】

    导读: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格,像花瓣网.蘑菇街.美丽说等. 不废话,直接上代码,整段代码分为前后两段代码,具体代码如下所示. 前台: <?php <br>$category=$this->getMyVal('category',$_GET);<br>

  • jQuery向下滚动即时加载内容实现的瀑布流效果

    下拉滚动条或鼠标滚轮滚动到页面底部时, 动态即时加载新内容. 后台用 json 传输数据, 示例程序中只写了示例数组.数据也只设置了两个属性, 需根据实际应用改写. 页面用了 ul li 做为容器, 每个 li 表示一列 <ul id="stage"> <li></li> <li></li> <li></li> PHP和Jquery和ajax实现下拉淡出瀑布流效果(无需插件) <li><

  • 使用JS实现图片展示瀑布流效果(简单实例)

    不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度一样,高度并不 一样,高高低低就像瀑布一样,所以叫做瀑布流效果.下面我把代码给大家,大家 随便下几张图片试试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu

  • vue.js组件vue-waterfall-easy实现瀑布流效果

    vue.js组件vue-waterfall-easy实现瀑布流效果

    想必大家应该很多都已经习惯了jquery的DOM操作,jquery的瀑布流实现起来也很容易. 但是,随着时代的发展,随着时代的进步..... 算了算了,扯远了,既然能找到这儿来,肯定是在vue.js上已经有一定的基础了,咱们废话不多说,直接进入主题. vue-waterfall-easy easy! easy! easy! 重要的事情说三遍!!! 所以说,咱们今天用到的不是大家熟知的vue-waterfall,而是vue-waterfall-easy: 一.获取vue-waterfall-eas

  • 基于JavaScript实现瀑布流效果

    本文实例为大家分享了js实现瀑布流效果的具体代码,供大家参考,具体内容如下 前端内容: 使用JavaScript和四个div,将照片放入四个div中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container { width: 1000px

随机推荐