AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

jQuery图片瀑布流demo效果示例（整理）jQuery瀑布流效果

2023-09-16 52
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： jQuery图片瀑布流demo效果示例（整理）jQuery瀑布流效果

效果图：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery图片瀑布流demo</title>
    <style type="text/css">
      /* 定义列表样式开始 */
      body {
        background: #FF7675;
      }
      img {
        max-width: 100%;
      }
      .container {
        width: 100%;
        max-width: 980px;
        margin: 0 auto;
        padding: 0 10px;
      }
      .wrapper {
        padding: 40px 0;
      }
      .card {
        background: #fff;
        border-radius: 6px;
        box-shadow: 0px 2px 6px rgba(0, 0, 0, .1);
        display: flex;
        flex-direction: column;
        transition: box-shadow .2s ease-in-out;
      }
      .card__picture {
        display: block;
        width: 100%;
        height: auto;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
      }
      .card-infos {
        padding: 20px;
        background: #fff;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
      }
      .card__title {
        font-size: 1.8rem;
        font-weight: 600;
        line-height: 1.4;
        margin: 0 0 10px;
      }
      .card__text {
        font-size: 1.4rem;
        font-weight: 300;
        margin: 0;
        color: #86888A;
      }
      .card__text--high {
        font-weight: 600;
      }
      .header {
        background: var(--main-bg-color);
        height: 160px;
        display: flex;
      }
      .header__title {
        margin: auto;
        font-weight: 300;
        font-size: 3.2rem;
        color: #fff;
      }
      .header__title--high {
        font-weight: 600;
      }
      .sortable__nav {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
      }
      .nav__link {
        padding: 0 20px 4px;
        color: #fff;
        font-size: 1.4rem;
        font-weight: 300;
        display: block;
        border-bottom: 2px solid transparent;
      }
      .nav__link.is-active {
        border-color: var(--main-bg-color);
      }
      .footer__list.list {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .list__item.item {
        display: flex;
      }
      .item__link.link {
        margin: 0;
      }
      .item__link.link:not(:first-child) {
        margin-left: 20px;
      }
      .link__icon {
        height: 2rem;
        width: 2rem;
      }
      /* 定义列表样式结束 */
      /* 瀑布流主要css样式必要开始 */
      .sjs-default {
        position: relative;
        padding: 0;
        margin: 0;
        opacity: 0;
        transition: height .2s ease-out, opacity .2s ease-out .2s
      }
      [data-sjsel] {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        transition: -webkit-transform .2s ease-out;
        transition: transform .2s ease-out;
        transition: transform .2s ease-out, -webkit-transform .2s ease-out
      }
      /* 瀑布流主要css样式必要结束 */
    </style>
  </head>
  <body>
    <div class="sortable">
      <div class="container">
        <div class="wrapper">
          <div id="sortable" class="sjs-default">
            <div data-sjsel="flatty">
              <div class="card">
                <img class="card__picture"
                  src="https://demosc.chinaz.net/Files/DownLoad/webjs1/201704/jiaoben5022/images/13.jpg"
                  alt="">
                <div class="card-infos">
                  <h2 class="card__title">1111</h2>
                  <p class="card__text">
                    我是内容1
                  </p>
                </div>
              </div>
            </div>
            <div data-sjsel="flatty">
              <div class="card">
                <img class="card__picture"
                  src="https://demosc.chinaz.net/Files/DownLoad/webjs1/201704/jiaoben5022/images/6.jpg"
                  alt="">
                <div class="card-infos">
                  <h2 class="card__title">2222</h2>
                  <p class="card__text">
                    我是内容2
                  </p>
                </div>
              </div>
            </div>
            <div data-sjsel="funny">
              <div class="card">
                <img class="card__picture"
                  src="https://demosc.chinaz.net/Files/DownLoad/webjs1/201704/jiaoben5022/images/2.jpg"
                  alt="">
                <div class="card-infos">
                  <h2 class="card__title">3333</h2>
                  <p class="card__text">
                    我是内容3
                  </p>
                </div>
              </div>
            </div>
            <div data-sjsel="flatty">
              <div class="card">
                <img class="card__picture"
                  src="https://demosc.chinaz.net/Files/DownLoad/webjs1/201704/jiaoben5011/img/set1/1.jpg"
                  alt="">
                <div class="card-infos">
                  <h2 class="card__title">4444</h2>
                  <p class="card__text">
                    我是内容4
                  </p>
                </div>
              </div>
            </div>
            <div data-sjsel="flatty">
              <div class="card">
                <img class="card__picture"
                  src="https://demosc.chinaz.net/Files/DownLoad/webjs1/201507/jiaoben3505/picture/3.jpg"
                  alt="">
                <div class="card-infos">
                  <h2 class="card__title">5555</h2>
                  <p class="card__text">
                    我是内容5
                  </p>
                </div>
              </div>
            </div>
            <div data-sjsel="funny">
              <div class="card">
                <img class="card__picture"
                  src="https://demosc.chinaz.net/Files/DownLoad/webjs1/201704/jiaoben5011/img/set1/10.jpg"
                  alt="">
                <div class="card-infos">
                  <h2 class="card__title">6666</h2>
                  <p class="card__text">
                    我是内容6
                  </p>
                </div>
              </div>
            </div>
            <div data-sjsel="flatty">
              <div class="card">
                <img class="card__picture"
                  src="https://demosc.chinaz.net/Files/DownLoad/webjs1/201601/jiaoben3951/img/13.jpg"
                  alt="">
                <div class="card-infos">
                  <h2 class="card__title">7777</h2>
                  <p class="card__text">
                    我是内容7
                  </p>
                </div>
              </div>
            </div>
            <div data-sjsel="flatty">
              <div class="card">
                <img class="card__picture"
                  src="https://demosc.chinaz.net/Files/DownLoad/webjs1/201601/jiaoben3951/img/12.jpg"
                  alt="">
                <div class="card-infos">
                  <h2 class="card__title">8888</h2>
                  <p class="card__text">
                    我是内容8
                  </p>
                </div>
              </div>
            </div>
            <div data-sjsel="funny">
              <div class="card">
                <img class="card__picture"
                  src="https://demosc.chinaz.net/Files/DownLoad/webjs1/201704/jiaoben5022/images/1.jpg"
                  alt="">
                <div class="card-infos">
                  <h2 class="card__title">9999</h2>
                  <p class="card__text">
                    我是内容9
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    // 瀑布流主要js-使用时新建新js文件拿出去即可
    "use strict";
    var _extends = Object.assign || function(t) {
        for (var e = 1; e < arguments.length; e++) {
          var n = arguments[e];
          for (var i in n) Object.prototype.hasOwnProperty.call(n, i) && (t[i] = n[i])
        }
        return t
      },
      _createClass = function() {
        function i(t, e) {
          for (var n = 0; n < e.length; n++) {
            var i = e[n];
            i.enumerable = i.enumerable || !1, i.configurable = !0, "value" in i && (i.writable = !0), Object
              .defineProperty(t, i.key, i)
          }
        }
        return function(t, e, n) {
          return e && i(t.prototype, e), n && i(t, n), t
        }
      }();
    function _toConsumableArray(t) {
      if (Array.isArray(t)) {
        for (var e = 0, n = Array(t.length); e < t.length; e++) n[e] = t[e];
        return n
      }
      return Array.from(t)
    }
    function _classCallCheck(t, e) {
      if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
    }
    var Sortable = function() {
      function d() {
        var t = 0 < arguments.length && void 0 !== arguments[0] ? arguments[0] : {},
          e = t.parent,
          n = t.links,
          i = void 0 === n ? document.querySelectorAll("[data-sjslink]") : n,
          s = t.active,
          a = void 0 === s ? "is-active" : s,
          r = t.margin,
          o = void 0 === r ? 20 : r,
          l = t.responsive,
          u = void 0 === l ? {
            980: {
              columns: 3
            },
            480: {
              columns: 2
            },
            0: {
              columns: 1
            }
          } : l,
          c = t.fadeDuration,
          h = void 0 === c ? {
            in: 300,
            out: 0
          } : c;
        _classCallCheck(this, d), this.parent = e, this.links = Array.from(i), this.active = a, this.margin = o,
          this.responsive = u, this.fadeDuration = h, this.elements = Array.from(this.parent.children), this
          .activeElements = this.elements, this.columns = 1, this.dataLink = "all", this.winWidth = window
          .innerWidth, this.init()
      }
      return _createClass(d, [{
        key: "orderelements",
        value: function() {
          var r = this,
            t = this.parent,
            e = this.activeElements,
            o = this.columns,
            l = this.blocWidth,
            u = (this.responsive, this.margin),
            n = e.reduce(function(t, e, n) {
              var i = r._sumArrHeight(t, o),
                s = n % o * (l + u),
                a = 0 <= n - o ? i[n % o] + u * Math.floor(n / o) : 0;
              return e.style.transform = "translate3d(" + s + "px, " + a + "px, 0)", t
                .push(e.offsetHeight), t
            }, []),
            i = this._sumArrHeight(n, o),
            s = Math.max.apply(Math, _toConsumableArray(i)) + u * (Math.floor(e.length / o) -
              1);
          t.style.height = s + "px"
        }
      }, {
        key: "handleFilterClick",
        value: function(t, e) {
          var n = this;
          t.preventDefault();
          var i = this.links,
            s = this.active;
          e.dataset.sjslink !== this.dataLink && (this.dataLink = e.dataset.sjslink, i.forEach(
            function(t) {
              t.isEqualNode(e) ? t.classList.add(s) : t.classList.remove(s)
            }), this._filterElements(function() {
            n.orderelements()
          }))
        }
      }, {
        key: "resize",
        value: function() {
          var t = this;
          window.addEventListener("resize", function() {
            clearTimeout(window.sortableResize), window.sortableResize = setTimeout(
              function() {
                t.winWidth = window.innerWidth, t._setBlocWidth(function() {
                  t.orderelements()
                })
              }, 500)
          })
        }
      }, {
        key: "init",
        value: function() {
          var n = this,
            t = this.parent,
            e = this.links,
            i = this.active;
          e.forEach(function(e, t) {
            0 === t && (e.classList.add(i), n.dataLink = e.dataset.sjslink), e
              .addEventListener("click", function(t) {
                n.handleFilterClick(t, e)
              })
          }), this._setBlocWidth(), window.addEventListener("load", function() {
            n._filterElements(function() {
              n.orderelements()
            }), t.style.opacity = 1
          }), this.resize()
        }
      }, {
        key: "_setBlocWidth",
        value: function(t) {
          var e = this.parent,
            n = this.elements,
            i = this.margin,
            s = this.responsive,
            a = this.columns = this._columnsCount(s).columns,
            r = this.blocWidth = (e.clientWidth - i * (a - 1)) / a;
          n.forEach(function(t) {
            t.style.width = r + "px"
          }), t && t()
        }
      }, {
        key: "_filterElements",
        value: function(t) {
          var e = this,
            n = this.elements,
            i = this.dataLink,
            s = this.fadeDuration;
          this.activeElements = n.filter(function(t) {
            return "all" === i ? (e._fadeIn(t, s.in), !0) : t.dataset.sjsel !== i ? (e
              ._fadeOut(t, s.out), !1) : (e._fadeIn(t, s.in), !0)
          }), t && t()
        }
      }, {
        key: "_sumArrHeight",
        value: function(t, s) {
          return t.reduce(function(t, e, n) {
            var i = n % s;
            return t[i] || (t[i] = 0), t[i] = t[i] + e, t
          }, [])
        }
      }, {
        key: "_columnsCount",
        value: function(t) {
          var n = this.winWidth;
          return Object.entries(t).reduce(function(t, e) {
            return n > e[0] && e[0] >= Math.max(t.width) ? {
              width: e[0],
              columns: e[1].columns
            } : t
          }, {
            width: 0,
            columns: 4
          })
        }
      }, {
        key: "_fadeIn",
        value: function(e) {
          var t = 1 < arguments.length && void 0 !== arguments[1] ? arguments[1] : 300,
            n = arguments[2],
            i = parseFloat(window.getComputedStyle(e, null).getPropertyValue("opacity")),
            s = 16 / t;
          e.style.display = "block", requestAnimationFrame(function t() {
            (i += s) <= 1 ? (e.style.opacity = i, requestAnimationFrame(t)) : (e.style
              .opacity = 1, n && n())
          })
        }
      }, {
        key: "_fadeOut",
        value: function(e) {
          var t = 1 < arguments.length && void 0 !== arguments[1] ? arguments[1] : 300,
            n = arguments[2],
            i = parseFloat(window.getComputedStyle(e, null).getPropertyValue("opacity")),
            s = t ? 16 / t : 1;
          requestAnimationFrame(function t() {
            0 <= (i -= s) ? (e.style.opacity = i, requestAnimationFrame(t)) : (e.style
              .opacity = 0, e.style.display = "none", n && n())
          })
        }
      }]), d
    }();
    HTMLElement.prototype.sortablejs = HTMLElement.prototype.sortablejs || function(t) {
      return new Sortable(_extends({
        parent: this
      }, t))
    };
  </script>
  <script type="text/javascript">
    document.querySelector('#sortable').sortablejs()
  </script>
</html>
文章标签：
JavaScript
关键词：
jQuery图片
jQuery瀑布流
jQuery示例
jQuery demo
jQuery图片demo
兜里只有三分钱~
目录
相关文章
1024小神
|
6月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
1024小神
61 1
mao29955
|
2月前
|
JavaScript
jQuery实现无缝图片滚动效果
jQuery实现无缝图片滚动效果
mao29955
153 67
飞翔的佩奇
|
6月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
飞翔的佩奇
68 0
博客趣
|
6月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果，js图片分散汇聚效果素材
博客趣
110 1
茶卡盐佑星_
|
5月前
|
JavaScript
jQuery实现瀑布流
jQuery实现瀑布流
茶卡盐佑星_
29 2
爱你三千遍斯塔克
|
5月前
|
移动开发 JavaScript 前端开发
rem的适配方案，css文件和js文件的引入方式，特色小边框的制作，DS-Digital.ttf数字展示屏的使用方法：，自适应图片 background-size，jQuery爆bug,a和盒子居中,
rem的适配方案，css文件和js文件的引入方式，特色小边框的制作，DS-Digital.ttf数字展示屏的使用方法：，自适应图片 background-size，jQuery爆bug,a和盒子居中,
爱你三千遍斯塔克
141 0
老板这功能得加钱
|
6月前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
老板这功能得加钱
28 0
爱吃糖的范同学
|
6月前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片？
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片？
爱吃糖的范同学
226 0
楚广明
|
JavaScript 前端开发
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片，并且用户可以点击左右按钮来切换图片。相信大家都知道jQuery是最优秀的Javascript框架之一。以其语法简单灵活而大受Web designer欢迎。
楚广明
1323 0
测试5555
|
Web App开发 JavaScript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片，并且用户可以点击左右按钮来切换图片。相信大家都知道jQuery是最优秀的Javascript框架之一。以其语法简单灵活而大受Web designer欢迎。
测试5555
816 0