- HTML代码片段
<div class="main">
<div class="main-items">
<div class="header">
新书奉献 - 夏有乔木,雅望天堂
</div>
<hr>
<div class="new-book-list">
<div class="card">
<a href="#">
<img src="../static/img/book_img/book_1.jpg" class="card-img-top" alt="散步的侵略者">
</a>
<div class="card-body">
<a class="card-title text-center" href="#">
散步的侵略者
</a>
<p class="card-text">
[日]前川知大
</p>
</div>
</div>
<div class="card">
<a href="#">
<img src="../static/img/book_img/book_2.jpg" class="card-img-top" alt="散步的侵略者">
</a>
<div class="card-body">
<a class="card-title text-center" href="#">
三十年战争史
</a>
<p class="card-text">
[英] 彼得·威尔逊
</p>
</div>
</div>
<div class="card">
<a href="#">
<img src="../static/img/book_img/book_3.jpg" class="card-img-top" alt="散步的侵略者">
</a>
<div class="card-body">
<a class="card-title text-center" href="#">
六十个故事
</a>
<p class="card-text">
[意] 迪诺·布扎蒂
</p>
</div>
</div>
<div class="card">
<a href="#">
<img src="../static/img/book_img/book_4.jpg" class="card-img-top" alt="散步的侵略者">
</a>
<div class="card-body">
<a class="card-title text-center" href="#">
诗人的思考
</a>
<p class="card-text">
(美) 海伦·文德勒
</p>
</div>
</div>
<div class="card">
<a href="#">
<img src="../static/img/book_img/book_5.jpg" class="card-img-top" alt="散步的侵略者">
</a>
<div class="card-body">
<a class="card-title text-center" href="#">
项塔兰3
</a>
<p class="card-text">
[澳大利亚]格里高利·大卫·罗伯兹
</p>
</div>
</div>
<div class="card">
<a href="#">
<img src="../static/img/book_img/book_6.jpg" class="card-img-top" alt="散步的侵略者">
</a>
<div class="card-body">
<a class="card-title text-center" href="#">
黑镜
</a>
<p class="card-text">
[英] 查利·布鲁克 / 安娜贝尔·琼斯
</p>
</div>
</div>
<div class="card">
<a href="#">
<img src="../static/img/book_img/book_7.jpg" class="card-img-top" alt="散步的侵略者">
</a>
<div class="card-body">
<a class="card-title text-center" href="#">
抓落叶
</a>
<p class="card-text">
[美]汤米·巴特勒
</p>
</div>
</div>
<div class="card">
<a href="#">
<img src="../static/img/book_img/book_8.jpg" class="card-img-top" alt="散步的侵略者">
</a>
<div class="card-body">
<a class="card-title text-center" href="#">
漫步八十年代
</a>
<p class="card-text">
老葛
</p>
</div>
</div>
<div class="card">
<a href="#">
<img src="../static/img/book_img/book_9.jpg" class="card-img-top" alt="散步的侵略者">
</a>
<div class="card-body">
<a class="card-title text-center" href="#">
一千亿种生活
</a>
<p class="card-text">
[英] 蕾秋·乔伊斯
</p>
</div>
</div>
<div class="card">
<a href="#">
<img src="../static/img/book_img/book_10.jpg" class="card-img-top" alt="散步的侵略者">
</a>
<div class="card-body">
<a class="card-title text-center" href="#">
电影时代
</a>
<p class="card-text">
[美] 保琳·凯尔
</p>
</div>
</div>
</div>
</div>
</div>
- CSS代码片段 (这里使用了bootstrap)
.main {
/*background: rgba(55, 55, 55, 0.4);*/
width: 1080px;
margin: 15px;
padding: 15px;
float: left;
border-radius: 3px;
background: rgba(55, 55, 55, 0.4);
}
.new-book-list {
position: relative;
}
.card {
float: left;
width: 135px;
margin: 10px 20px;
text-align: center;
position: absolute;
}
.card:hover {
box-shadow: 0 0 10px #fff;
}
.card-title {
font-size: 14px;
color: #333;
}
.card-title:hover {
text-decoration: none;
color: rgba(0, 0, 0, 0.35);
}
.card-body {
margin: auto 0;
}
.card-text {
font-size: 13px;
color: #333;
}
- JavaScript代码片段
/*
* 瀑布流插件
*
* Author: 掌上天空
* Time: 2020/12/6 - 21:51
* */
;
(function($) {
$.fn.waterFall = function() {
// 封装 瀑布流插件
var defaults = {
// 设置盒子的间距
gap: 40
}
defaults = $.extend(defaults)
var $this = $(this) // 获取 Content 列表元素
var item = $this.children() // 获取所有的盒子元素
// 每一行的数目是: 父元素的总宽度 / (子元素的宽度 + gap)
var itemWidth = item.width() // 瀑布流元素的宽度
var itemHeight = 0 // 瀑布流元素的高度,初始化为0
var column = Math.floor($(this).width() / (itemWidth + defaults.gap)) // 计算一行最多几列
console.log(column)
var arrayHeight = [] // 保存每一列的高度值
item.each(function( index, element ) {
itemHeight = $(element).height() // 获取当前遍历元素的高度
if( index < column ) {
// 如果当前遍历的元素ID小于 column的数目,表示当前是第一行
$(element).css({
top: 0, // 第一行是顶格显示的,所以设置top为 0
left: index * (itemWidth + defaults.gap)
})
arrayHeight[index] = itemHeight
} else {
function getMinHeight( arr ) {
var min = {} // 存储数组中的最小值和索引值
min.index = 0 // 最小值的索引值
min.value = arr[min.index]
for(let i = 1; i < arr.length; i++) {
if( arr[i] < min.value) {
min.value = arr[i]
min.index = i
}
}
return min
}
var min = getMinHeight(arrayHeight)
var minIndex = min.index
var minValue = min.value
$(element).css({
top: minValue + defaults.gap,
left: minIndex * (itemWidth + defaults.gap)
})
arrayHeight[minIndex] += (itemHeight + defaults.gap)
}
})
// 获取子元素中的最高高度,将此高度加上间隔高度得到新高度,新高度即父元素的高度
let arrMaxValue = arrayHeight[0]
for(let i = 1; i < arrayHeight.length; i++) {
if ( arrayHeight[i] > arrMaxValue ) {
arrMaxValue = arrayHeight[i]
}
}
// 设置当前的元素(调用此插件的元素)的高度为 [子元素列的最大值 + 间隔]
$(this).css({
height: arrMaxValue + defaults.gap
})
}
})(jQuery)
-
最后的效果图
-
card比较少的时候的效果
- card比较多的时候的效果