zoukankan      html  css  js  c++  java
  • jQuery实现瀑布流(pc、移动通用)

    使用 jQuery 的 Masonry 插件来实现这种页面形式

    1,分别下载 jQuery 与 Masonry ,然后把他们都加载到页面中使用。

    加载代码:

     
    1 <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    2 <script src="http://jq22.qiniudn.com/masonry-docs.min.js"></script>

    解释:很简单,就是把下载之后的脚本文件嵌入到你想使用瀑布流形式的页面中,注意文件的名称与路径,根据你自己的实际情况修改。

    2,页面代码

    1 <div id="masonry" class="container-fluid">
    2   <div class="box"><img src="http://jq22.com/images/1.jpg"></div>
    3   <div class="box"><img src="http://jq22.com/images/2.jpg"></div>
    4   <div class="box"><img src="http://jq22.com/images/3.jpg"></div>
    5   <div class="box"><img src="http://jq22.com/images/4.jpg"></div>
    6   <div class="box"><img src="http://jq22.com/images/5.jpg"></div>
    7   ...
    8 </div>

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

    3,样式代码

     1 .container-fluid {
     2   padding: 20px;
     3   }
     4 .box {
     5   margin-bottom: 20px;
     6   float: left;
     7   width: 220px;
     8   }
     9   .box img {
    10   max-width: 100%
    11 }

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

    4,在页面中启用瀑布流形式的脚本代码

     1 $(function() {
     2     var $container = $('#masonry');
     3     $container.imagesLoaded(function() {
     4         $container.masonry({
     5                 itemSelector: '.box',
     6                 gutter: 20,
     7                 isAnimated: true,
     8             });
     9      });
    10 });

    解释:这里我们首先定位想使用瀑布流的大容器是什么,这里就是带有 #masonry ID 的 <div> 标签,在 var $container = $('#masonry'); 这行代码中定义。然后我们还要说明瀑布流里的每个内容块容器上共同的类是什么,这里就是带有 .box 类的 <div> 标签,在itemSelector : '.box', 这行代码中定义。

    gutter: 20, 这行代码定义了内容块之间的距离是 20 像素,isAnimated: true, 这行代码可以打开动画选项,也就是当改变窗口宽度的时候,每行显示的内容块的数量会有变化,这个变化会使用一种动画效果。

  • 相关阅读:
    Java学习二十九天
    Java学习二十八天
    47. Permutations II 全排列可重复版本
    46. Permutations 全排列,无重复
    subset ii 子集 有重复元素
    339. Nested List Weight Sum 339.嵌套列表权重总和
    251. Flatten 2D Vector 平铺二维矩阵
    217. Contains Duplicate数组重复元素
    209. Minimum Size Subarray Sum 结果大于等于目标的最小长度数组
    438. Find All Anagrams in a String 查找字符串中的所有Anagrams
  • 原文地址:https://www.cnblogs.com/haonanZhang/p/6290240.html
Copyright © 2011-2022 走看看