效果图：
<!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="/Files/DownLoad/webjs1/04/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="/Files/DownLoad/webjs1/04/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="/Files/DownLoad/webjs1/04/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="/Files/DownLoad/webjs1/04/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="/Files/DownLoad/webjs1/07/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="/Files/DownLoad/webjs1/04/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="/Files/DownLoad/webjs1/01/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="/Files/DownLoad/webjs1/01/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="/Files/DownLoad/webjs1/04/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>
