我个人不太喜欢这种布局、但需求还是有的、只能实现。
查阅了资料找到两种方式:
第一种:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>瀑布流布局</title>
<style type="text/css">
#grid {
position: relative;
}
.item {
position: absolute;
left: 0;
top: 0;
width: 280px;
height: auto;
overflow: hidden;
padding: 15px;
border: 1px solid #ededed;
}
.item>img{width: 100%;}
</style>
</head>
<body>
<div id="grid">
<div class="item">
<img src="img/img1.jpg" alt="图片丢失">
</div>
<div class="item">
<img src="img/img2.jpg" alt="图片丢失">
</div>
<div class="item">
<img src="img/img3.jpg" alt="图片丢失">
</div>
<div class="item">
<img src="img/img4.jpg" alt="图片丢失">
</div>
<div class="item">
<img src="img/img1.jpg" alt="图片丢失">
</div>
<div class="item">
<img src="img/img2.jpg" alt="图片丢失">
</div>
<div class="item">
<img src="img/img1.jpg" alt="图片丢失">
</div>
<div class="item">
<img src="img/img2.jpg" alt="图片丢失">
</div>
<div class="item">
<img src="img/img3.jpg" alt="图片丢失">
</div>
<div class="item">
<img src="img/img4.jpg" alt="图片丢失">
</div>
<div class="item">
<img src="img/img5.jpg" alt="图片丢失">
</div>
<div class="item">
<img src="img/img3.jpg" alt="图片丢失">
</div>
<div class="item">
<img src="img/img4.jpg" alt="图片丢失">
</div>
<div class="item">
<img src="img/img1.jpg" alt="图片丢失">
</div>
<div class="item">
<img src="img/img2.jpg" alt="图片丢失">
</div>
<div class="item">
<img src="img/img3.jpg" alt="图片丢失">
</div>
<div class="item">
<img src="img/img4.jpg" alt="图片丢失">
</div>
<div class="item">
<img src="img/img5.jpg" alt="图片丢失">
</div>
<div class="item">
<img src="img/img5.jpg" alt="图片丢失">
</div>
<div class="item">
<img src="img/img5.jpg" alt="图片丢失">
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript">
$(function() {
function itemWaterfull() {
var margin = 15; //每个item的外边距,因人需求而定
var items = $(".item"); //每个item的统一类名
var item_width = items[0].offsetWidth + margin; //取区块的实际宽度
$("#grid").css("padding", "0"); //容器的起始内边距先设为0,按之后一行item的宽度再来设,保证所有item的居中
var container_width = $("#grid")[0].offsetWidth; //获取容器宽度
var n = parseInt(container_width / item_width); //一行所允许放置的item个数
var container_padding = (container_width - (n * item_width)) / 2; //一行宽度在容器中所剩余的宽度,设为容器的左右内边距
$("#grid").css("padding", "0 " + container_padding + "px");
//寻找数组最小高度的下标
function findMinIndex(arr) {
var len = arr.length,
min = 999999,
index = -1;
for (var i = 0; i < len; i++) {
if (min > arr[i]) {
min = arr[i];
index = i;
}
}
return index;
}
//放置item
function putItem() {
var items_height = []; //每个item的高度
var len = items.length; //获取item的个数
for (var i = 0; i < len; i++) {
var item_height = items[i].offsetHeight; //获取每个item的高度
//放置在第一行的item
if (i < n) {
items_height[i] = item_height; //高度数组更新
items.eq(i).css("top", 0);
items.eq(i).css("left", i * item_width);
} else { //放置在其他行的item
var min_index = findMinIndex(items_height); //寻找最小高度
if (min_index == -1) {
console.log("高度计算出现错误");
return;
}
items.eq(i).css("top", items_height[min_index] + margin);
items.eq(i).css("left", min_index * item_width);
items_height[min_index] += item_height + margin; //高度数组更新
}
}
var max_height = Math.max.apply(null, items_height);
$("#grid").css("height", max_height); //最后更新容器高度
}
putItem();
}
itemWaterfull();
window.onresize = function() {
itemWaterfull();
}; //在窗口大小改变后,item重新放置
});
</script>
</body>
</html>
第二种:BlocksIt.js
<!DOCTYPE html>
<html>
<head>
<title>BlocksIt.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/stauy.css" />
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="js/blocksit.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function() {
$(window).load(function() {
$('#container').BlocksIt({
numOfCol: 3, //列数
offsetX: 5, //x轴间距
offsetY: 5 //y轴间距
});
});
});
</script>
</head>
<body>
<section id="wrapper">
<hgroup>
<h2>BlocksIt.js Demonstration 2</h2>
<h3>Pinterest Dynamic Grid Layout with CSS3 Transitions (RESIZE)</h3>
</hgroup>
<div id="container">
<div class="grid">
<div class="imgholder">
<img src="img/img1.jpg" alt="...">
</div>
<strong>Sunset Lake</strong>
<p>A peaceful sunset view...</p>
<div class="meta">by j osborn</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="img/img2.jpg" alt="...">
</div>
<strong>Bridge to Heaven</strong>
<p>Where is the bridge lead to?</p>
<div class="meta">by SigitEko</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="img/img3.jpg" alt="...">
</div>
<strong>Autumn</strong>
<p>The fall of the tree...</p>
<div class="meta">by Lars van de Goor</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="img/img4.jpg" alt="...">
</div>
<strong>Winter Whisper</strong>
<p>Winter feel...</p>
<div class="meta">by Andrea Andrade</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="img/img5.jpg" alt="...">
</div>
<strong>Light</strong>
<p>The only shinning light...</p>
<div class="meta">by Lars van de Goor</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="img/img3.jpg" alt="...">
</div>
<strong>Rooster's Ranch</strong>
<p>Rooster's ranch landscape...</p>
<div class="meta">by Andrea Andrade</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="img/img1.jpg" alt="...">
</div>
<strong>Autumn Light</strong>
<p>Sun shinning into forest...</p>
<div class="meta">by Lars van de Goor</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="img/img5.jpg" alt="...">
</div>
<strong>Yellow cloudy</strong>
<p>It is yellow cloudy...</p>
<div class="meta">by Zsolt Zsigmond</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="img/img3.jpg" alt="...">
</div>
<strong>Herringfleet Mill</strong>
<p>Just a herringfleet mill...</p>
<div class="meta">by Ian Flindt</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="img/img1.jpg" alt="...">
</div>
<strong>Battle Field</strong>
<p>Battle Field for you...</p>
<div class="meta">by Andrea Andrade</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="img/img2.jpg" alt="...">
</div>
<strong>Sundays Sunset</strong>
<p>Beach view sunset...</p>
<div class="meta">by Robert Strachan</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="img/img4.jpg" alt="...">
</div>
<strong>Sun Flower</strong>
<p>Good Morning Sun flower...</p>
<div class="meta">by Zsolt Zsigmond</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="img/img5.jpg" alt="...">
</div>
<strong>Beach</strong>
<p>Something on beach...</p>
<div class="meta">by unknown</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="img/img1.jpg" alt="...">
</div>
<strong>Flowers</strong>
<p>Hello flowers...</p>
<div class="meta">by R A Stanley</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="img/img2.jpg" alt="...">
</div>
<strong>Alone</strong>
<p>Lonely plant...</p>
<div class="meta">by Zsolt Zsigmond</div>
</div>
</div>
</section>
</body>
</html>
stauy.css代码
body {
margin: 0;
padding: 0;
color: #333;
font-family: Cambria, Georgia, serif;
font-size: 15px;
overflow-x: hidden;
}
header, section, footer, hgroup {
display: block;
}
a {
color: #35BFFF;
text-decoration: none;
}
a:hover, a:active {
color: #91DCFF;
}
#backlinks {
float: right;
padding: 0 20px;
line-height: 22px;
font-weight: bold;
font-size: 13px;
}
#backlinks a {
text-align: right;
display: block;
}
/* clearfix */
.clearfix {
clear: both;
}
/* wrapper css */
#wrapper {
margin-top: 70px;
width: 100%;
}
#wrapper hgroup {
text-align: center;
}
#wrapper h2 {
margin: 5px 0;
color: #FF6D99;
text-shadow: 1px 1px 2px #A50031;
font-size: 33px;
font-family: Arial Narrow, Arial, sans-serif;
}
#wrapper h3 {
font-style: italic;
font-weight: normal;
font-size: 18px;
text-shadow: 1px 1px 0 #fff;
color: #888;
margin: 5px 0;
}
#container {
position: relative;
width: 100%;
margin: 0 auto 25px;
padding-bottom: 10px;
}
.grid {
width: 188px;
min-height: 100px;
padding: 15px;
background: #fff;
margin: 8px;
font-size: 12px;
float: left;
box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
-moz-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
-webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
-webkit-transition: top 1s ease, left 1s ease;
-moz-transition: top 1s ease, left 1s ease;
-o-transition: top 1s ease, left 1s ease;
-ms-transition: top 1s ease, left 1s ease;
}
.grid>div{text-align: center;}
.grid strong {
border-bottom: 1px solid #ccc;
margin: 10px 0;
display: block;
padding: 0 0 5px;
font-size: 17px;
}
.grid .meta {
text-align: right;
color: #777;
font-style: italic;
}
.grid .imgholder img {
max-width:100%;
background: #ccc;
display: inline-block;
}
@media screen and (max-width : 1240px) {
body {
overflow: auto;
}
}
@media screen and (max-width : 900px) {
#backlinks {
float: none;
clear: both;
}
#backlinks a {
display: inline-block;
padding-right: 20px;
}
#wrapper {
margin-top: 90px;
}
}
BlocksIt.js 代码
(function(a) {
var b = {
numOfCol: 5,
offsetX: 5,
offsetY: 5,
blockElement: "div"
};
var c, d;
var e = [];
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(a) {
var b = this.length >>> 0;
var c = Number(arguments[1]) || 0;
c = c < 0 ? Math.ceil(c) : Math.floor(c);
if (c < 0) c += b;
for (; c < b; c++) {
if (c in this && this[c] === a) return c
}
return -1
}
}
var f = function() {
e = [];
for (var a = 0; a < b.numOfCol; a++) {
g("empty-" + a, a, 0, 1, -b.offsetY)
}
};
var g = function(a, c, d, f, g) {
for (var h = 0; h < f; h++) {
var i = new Object;
i.x = c + h;
i.size = f;
i.endY = d + g + b.offsetY * 2;
e.push(i)
}
};
var h = function(a, b) {
for (var c = 0; c < b; c++) {
var d = i(a + c, "x");
e.splice(d, 1)
}
};
var i = function(a, b) {
for (var c = 0; c < e.length; c++) {
var d = e[c];
if (b == "x" && d.x == a) {
return c
} else if (b == "endY" && d.endY == a) {
return c
}
}
};
var j = function(a, b) {
var c = [];
for (var d = 0; d < b; d++) {
c.push(e[i(a + d, "x")].endY)
}
var f = Math.min.apply(Math, c);
var g = Math.max.apply(Math, c);
return [f, g, c.indexOf(f)]
};
var k = function(a) {
if (a > 1) {
var b = e.length - a;
var c = false;
var d, f;
for (var g = 0; g < e.length; g++) {
var h = e[g];
var i = h.x;
if (i >= 0 && i <= b) {
var k = j(i, a);
if (!c) {
c = true;
d = k;
f = i
} else {
if (k[1] < d[1]) {
d = k;
f = i
}
}
}
}
return [f, d[1]]
} else {
d = j(0, e.length);
return [d[2], d[0]]
}
};
var l = function(a, c) {
if (!a.data("size") || a.data("size") < 0) {
a.data("size", 1)
} else if (a.data("size") > b.numOfCol) {
a.data("size", b.numOfCol)
}
var e = k(a.data("size"));
var f = d * a.data("size") - (a.outerWidth() - a.width());
a.css({
width: f - b.offsetX * 2,
left: e[0] * d,
top: e[1],
position: "absolute"
});
var i = a.outerHeight();
h(e[0], a.data("size"));
g(a.attr("id"), e[0], e[1], a.data("size"), i)
};
a.fn.BlocksIt = function(g) {
if (g && typeof g === "object") {
a.extend(b, g)
}
c = a(this);
d = c.width() / b.numOfCol;
f();
c.children(b.blockElement).each(function(b) {
l(a(this), b)
});
var h = j(0, e.length);
c.height(h[1] + b.offsetY);
return this
}
})(jQuery)