jQuery图片瀑布流demo效果示例(整理)jQuery瀑布流效果

简介: 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>
相关文章
|
5月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
55 1
|
5月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
15天前
|
JavaScript
jQuery实现无缝图片滚动效果
jQuery实现无缝图片滚动效果
128 67
|
5月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
93 1
|
4月前
|
JavaScript
jQuery实现瀑布流
jQuery实现瀑布流
|
4月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
5月前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
|
5月前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
JavaScript 前端开发 容器
|
2天前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
12 4
jQuery Cookie 插件