flex瀑布流（响应式配置）

一.项目需求实现瀑布流，并且可以点击查看展开内容 所以抛弃了定位的方式选择了flex布局，参考网站

1.瀑布流函数

项目需求实现瀑布流，并且可以点击查看展开内容 所以抛弃了定位的方式选择了flex布局，flex分列后，通过计算每列高度再将每项item项分配到合适的列

	function waterfallInit(e) {
		let { p, li, colName, rule } = e;
		let windowW = $(window).width();
		let col, col_spacing, row_spacing;

		// let init = false;
		for (let rkey in rule) {
			if (windowW >= rkey) {// 取rule配置好的列数，列间距和每列子项的行间距
				col = rule[rkey].column;
				col_spacing = rule[rkey].col_spacing;
				row_spacing = rule[rkey].row_spacing;
				// init = true;
			}
		}

		// 全部item
		let fallList = $(p).find(li);

		// 列标签
		let colele = `
		<div class="${colName}" style="row-gap: ${row_spacing}px">
			
		</div>
		`

		if ($(p).find(`.${colName}`).length > 0) {// 已经存在了列标签需要删除后，sort重新排序index 返回最初的数组
			$(li).unwrap();//删除上级
			fallList.sort(function (a, b) {
				let x = $(a).attr('data-index')
				let y = $(b).attr('data-index')
				// console.log(x);
				return x - y;
			})
			
		}

		fallList.each(function (i, ele) {// 提前获取高度赋值在标签
			let myHeight = $(this).height();
			$(this).attr('myheight', myHeight);
		})

		$(p).css({// 给父级设置列数和列间距
			'display': 'grid',
			'grid-template-columns': `repeat(${col}, 1fr)`,
			'grid-column-gap': `${col_spacing}px`
		})
		// 每列的高度
		let col_height_obj = [];

		// 初始化列高度 为0
		for (var i = 0; i < col; i++) {
			col_height_obj[i] = 0
			$(p).append(colele);// 开始添加列数
		}


		let collist = $(p).find(`.${colName}`);
		// 容器宽度
		let pW = $(p).width();

		// item宽度
		let itemW = (pW - ((col - 1) * col_spacing)) / col;
	
		// 添加规则 [0,0,0,0] 有0添加到0值索引的对应列
		// 否则添加到数组最低值的列  
		
		fallList.each(function (i, ele) {
			$(this).css('width', itemW); 
			// 最小高度
			let minHeight = Math.min(...col_height_obj)
			// 最小高度列的索引
			let minHeight_index = col_height_obj.indexOf(minHeight);
			// 元素自身高度
			let eleHeight = parseInt($(this).attr('myheight'));
			
			// 元素添加到对应列
			$(ele).appendTo(collist.eq(minHeight_index));
			// col_height_obj[minHeight_index] += eleHeight;
			
			// 对应列需要更新 列高度数组 
			// 例如元素高250 
			// [0,0,0,0] -> [250,0,0,0]
			col_height_obj[minHeight_index] = $(`.${colName}`).eq(minHeight_index).height();

		})

		// fallList.each(function (i, ele) {
		// 	let eleHeight = $(this).height();
		// 	console.log('eleHeight', eleHeight);

		// })
	};
	

2.瀑布流初始化 调用

function loadInit() {//初始化
		if ($('.community-waterfall').length > 0) {
			waterfallInit({
				p: '.community-waterfall',
				li: '.fall-item',
				colName: 'fall-col',
				rule: {// 根据浏览器窗口来取对应的配置
					1280: {
						column: 4,
						row_spacing: 40,
						col_spacing: 20
					},
					1024: {
						column: 3,
						row_spacing: 40,
						col_spacing: 20
					},
					768: {
						column: 2,
						row_spacing: 24,
						col_spacing: 20
					},
					320: {
						column: 1,
						row_spacing: 24,
						col_spacing: 20
					},
				},
			})
		}

	}

3.响应式防抖

	//防抖
	var loadInitTask = null;
	$(window).resize(function () {
		// if ($(window).width() == 1280) {
		clearTimeout(loadInitTask);
		loadInitTask = setTimeout(function () {
			loadInit()
		}, 50);
		// }
	});
	loadInit()

4、html

<div class="community-p">
	<div class="community-waterfall">
		// 循环 取key data-index 用上
		<a href=" class="fall-item" data-index="key">
		</a>
	</div>
</div>

5、css

.community-p {
    margin: 16px 0 0;
    border-radius: 20px;
    background: var(--color13);
    padding: 20px;

    .page {
        float: none;
        margin: 20px 0 0;
    }
}

.community-waterfall {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    // grid-template-columns: repeat(4, 1fr);
    // grid-column-gap: 20px;
    // flex-wrap: wrap;
    // row-gap:40px;
    column-gap:0;
    
    align-items: flex-start;
    
    transition: all 0.2s;
    // column-gap:0px;
    .fall-col {
        display: flex;
        flex-direction: column;
        row-gap: 0;
        transition: all 0.2s;
    }

    .fall-item {
        // max-width: 275px;
        // margin: 0 10px;
        width: 275px;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 2px 5px 4px rgba(203,203,203,.3);

        .imgbox {
            width: 100%;
            padding-top: calc(210/275*100%);
            position: relative;
        }

        .text {
            padding: 16px 20px 20px;

            &.isseemore {
                .desc {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 20;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

            }
            
            .ii {
                height: 14px;
            }
            .tips  {
                .t-item {
                    
                }
            }
            .desc {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 10;
                overflow: hidden;
                text-overflow: ellipsis;
                color: var(--color18);
                margin-top: 8px;
            }

            .com-seemore {
                margin-top: 6px;
            }
        }
    }
}