效果图：
<!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>