2025-05-08

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

    .waterfall-container {
        width: 100%;
        padding: 20px;
        background: #f5f5f5;
    }

    .waterfall {
        position: relative;
        width: 100%;
        margin: 0 auto;
    }

    .waterfall-item {
        position: absolute;
        width: calc(25% - 20px);
        margin: 10px;
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
    }

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

    .waterfall-item img {
        width: 100%;
        display: block;
    }

    .waterfall-item .content {
        padding: 10px;
    }

    .waterfall-item h3 {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .waterfall-item p {
        font-size: 14px;
        color: #666;
    }
</style>

</head>
<body>
<div class="waterfall-container">
<div class="waterfall" id="waterfall"></div>
</div>

<script>
    // 模拟数据
    const items = [
        { image: 'https://picsum.photos/400/300?random=1', title: '图片标题1', desc: '图片描述1' },
        { image: 'https://picsum.photos/400/400?random=2', title: '图片标题2', desc: '图片描述2' },
        { image: 'https://picsum.photos/400/350?random=3', title: '图片标题3', desc: '图片描述3' },
        { image: 'https://picsum.photos/400/250?random=4', title: '图片标题4', desc: '图片描述4' },
        { image: 'https://picsum.photos/400/450?random=5', title: '图片标题5', desc: '图片描述5' },
        { image: 'https://picsum.photos/400/320?random=6', title: '图片标题6', desc: '图片描述6' },
        { image: 'https://picsum.photos/400/380?random=7', title: '图片标题7', desc: '图片描述7' },
        { image: 'https://picsum.photos/400/280?random=8', title: '图片标题8', desc: '图片描述8' },
        { image: 'https://picsum.photos/400/420?random=9', title: '图片标题9', desc: '图片描述9' },
        { image: 'https://picsum.photos/400/360?random=10', title: '图片标题10', desc: '图片描述10' }
    ];

    class Waterfall {
        constructor(container, items) {
            this.container = container;
            this.items = items;
            this.columns = 4; // 列数
            this.gap = 20; // 间距
            this.init();
        }

        init() {
            this.createItems();
            this.layout();
            window.addEventListener('resize', () => this.layout());
        }

        createItems() {
            this.items.forEach(item => {
                const div = document.createElement('div');
                div.className = 'waterfall-item';
                div.innerHTML = `
                    <img src="${item.image}" alt="${item.title}">
                    <div class="content">
                        <h3>${item.title}</h3>
                        <p>${item.desc}</p>
                    </div>
                `;
                this.container.appendChild(div);
            });
        }

        layout() {
            const items = this.container.children;
            const containerWidth = this.container.clientWidth;
            const itemWidth = (containerWidth - (this.columns - 1) * this.gap) / this.columns;
            
            // 初始化列高数组
            const columnHeights = new Array(this.columns).fill(0);
            
            // 遍历所有项目
            Array.from(items).forEach(item => {
                // 找到最短的列
                const minHeight = Math.min(...columnHeights);
                const columnIndex = columnHeights.indexOf(minHeight);
                
                // 设置项目位置
                item.style.width = itemWidth + 'px';
                item.style.left = (columnIndex * (itemWidth + this.gap)) + 'px';
                item.style.top = minHeight + 'px';
                
                // 更新列高
                columnHeights[columnIndex] += item.offsetHeight + this.gap;
            });
            
            // 设置容器高度
            this.container.style.height = Math.max(...columnHeights) + 'px';
        }
    }

    // 初始化瀑布流
    const waterfall = new Waterfall(document.getElementById('waterfall'), items);
</script>

</body>
</html>
file:///E:/CloudProgram2024/01.web/homework/lesson.07/demo02.html

2025-05-08

推荐阅读更多精彩内容