jQuery 瀑布流布局-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147387417

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 瀑布流布局</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
padding: 20px;
}

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

h1 {
text-align: center;
margin-bottom: 30px;
color: #333;
}

.waterfall {
position: relative;
}

.item {
position: absolute;
width: 23%; /* 4列布局，留2%的间隙 */
margin: 1%;
padding: 15px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.item:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.item img {
width: 100%;
height: auto;
border-radius: 3px;
margin-bottom: 10px;
}

.item h3 {
font-size: 16px;
margin-bottom: 8px;
color: #333;
}

.item p {
font-size: 14px;
color: #666;
line-height: 1.4;
}

.load-more {
text-align: center;
margin: 30px 0;
}

.load-more-btn {
padding: 10px 20px;
background: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background 0.3s;
}

.load-more-btn:hover {
background: #2980b9;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery 瀑布流布局</h1>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

// 初始化瀑布流
function initWaterfall() {
// 计算列数
var containerWidth = $('.waterfall').width();
itemWidth = containerWidth * 0.23; // 23%宽度
colCount = Math.floor(containerWidth / (itemWidth + containerWidth * 0.02));

// 重置列高度数组
colHeightArr = [];
for (var i = 0; i < colCount; i++) {
colHeightArr.push(0);
}

// 设置项目宽度
$('.item').width(itemWidth);
}

// 定位项目
function positionItems() {
$('.item').each(function() {
// 找到高度最小的列
var minHeight = Math.min.apply(null, colHeightArr);
var minColIndex = colHeightArr.indexOf(minHeight);

// 设置项目位置
$(this).css({
'left': minColIndex * (itemWidth + $('.waterfall').width() * 0.02),
'top': minHeight
});

// 更新列高度
colHeightArr[minColIndex] += $(this).outerHeight(true);
});

// 设置容器高度
$('.waterfall').height(Math.max.apply(null, colHeightArr));
}

// 生成随机数据
function generateRandomData(count) {
var titles = [
"美丽的风景", "城市风光", "自然奇观", "动物世界",
"美食天地", "旅行日记", "艺术创作", "科技前沿"
];

var contents = [
"这是一张美丽的图片，展示了自然的壮丽景色。",
"城市的高楼大厦和繁华街道。",
"大自然的鬼斧神工，令人叹为观止。",
"可爱的动物们，它们是我们的朋友。",
"色香味俱全的美食，让人垂涎欲滴。",
"旅行中的美好回忆，值得珍藏。",
"艺术家的创意作品，充满想象力。",
"科技改变生活，未来已来。"
];

var images = [
"https://picsum.photos/300/200?random=1",
"https://picsum.photos/300/250?random=2",
"https://picsum.photos/300/180?random=3",
"https://picsum.photos/300/220?random=4",
"https://picsum.photos/300/300?random=5",
"https://picsum.photos/300/240?random=6",
"https://picsum.photos/300/260?random=7",
"https://picsum.photos/300/280?random=8"
];

var html = '';
for (var i = 0; i < count; i++) {
var randomIndex = Math.floor(Math.random() * titles.length);
var randomHeight = 200 + Math.floor(Math.random() * 150);

html += `
<div class="item">
<img src="${images[randomIndex]}" alt="图片">
<h3>${titles[randomIndex]} ${i+1}</h3>
<p>${contents[randomIndex]}</p>
</div>
`;
}

return html;
}

// 加载更多数据
function loadMoreData() {
if (isLoading) return;

isLoading = true;
$('.load-more-btn').text('加载中...');

// 模拟异步加载
setTimeout(function() {
var newItems = generateRandomData(8);
$('.waterfall').append(newItems);

// 重新计算位置
initWaterfall();
positionItems();

isLoading = false;
$('.load-more-btn').text('加载更多');
}, 800);
}

// 初始化加载数据
var initialData = generateRandomData(12);
$('.waterfall').html(initialData);

// 初始化瀑布流
initWaterfall();
positionItems();

// 窗口大小改变时重新布局
$(window).resize(function() {
initWaterfall();
positionItems();
});

// 加载更多按钮点击事件
$('.load-more-btn').click(loadMoreData);

// 滚动到底部自动加载
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
loadMoreData();
}
});
});
</script>
</body>
</html>