It turns out that it is so simple to write waterfall, you can come and you can do it (the three methods are adaptive to the waterfall flow)

effect:

1. JQ realizes adaptive waterfall flow

Thinking analysis:

1. The effect of waterfall flow is equal width and unequal height, that is, the width of each element is the same;

2. Monitor the page width change through js, change the width of each element, and realize the change of the number of columns;

3. Calculate the left and top values for each element through the number of columns to achieve waterfall positioning;

4. Starting from the second element of each column, add height.

Code:

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			* {
				margin: 0;
				font-size: 0;
			}

			.img_item {
				box-sizing: border-box;
				border: 5px solid #fff;
			}

			.box {
				position: relative;
				height: 50px;
				width: calc(100% - 40px);
				margin: 20px;
			}
		</style>
		<script src="code/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="waterfallFlowBOx box">
			<img src="jsbase/瀑布流/picture/1.jpg" alt="" class="img_item">
			//此处省略100个img标签
			<img src="jsbase/瀑布流/picture/9.jpg" alt="" class="img_item">
		</div>

	</body>
	<script type="text/javascript">
		window.onload = function() {
			(function(docs, win) {
				waterfallFlow();
				window.onresize = function() {
					waterfallFlow();
				}
			})(document, window);
		}

		function waterfallFlow() {
			var box = $(".img_item");
			var value = $(".waterfallFlowBOx").outerWidth(); //获取父级的宽度

			var deviceWidth = Math.max(750, value) //当父级宽度小于750时，

			let cols = Math.floor(deviceWidth / 500);

			$(".img_item").css("width", Math.ceil(value / cols) + "px");

			var boxwidth = $(".img_item").outerWidth();

			//创建数组
			var heightArr = [];
			//图片遍历循环，除第一 排不需要定位，取高度值其它排定位处理
			box.each(function(index, item) {
				//求出图片的高度
				var itemheight = $(item).outerHeight();
				//是不是第一 排
				if (index < cols) {
					heightArr[index] = itemheight;
					$(item).css({
						position: "absolute",
						top: 0,
						left: index * boxwidth + "px"
					})
				} else {
					//最小图片的高度
					var minitemheight = Math.min(...heightArr);
					//最小的索引$. inArray()用于查找数组中指定值，返回索引( 未匹配返回-1)
					// console.log(heightArr);
					var minheightindex = $.inArray(minitemheight, heightArr)
					// console.log(minheightindex)
					$(item).css({
						position: "absolute",
						top: minitemheight + "px",
						left: minheightindex * boxwidth + "px"
					})
					//高度追加
					heightArr[minheightindex] += itemheight;
				}
			})
		}
	</script>
</html>

Two, column multi-line layout to achieve waterfall flow

Thinking analysis:

The column implementation of waterfall flow mainly relies on two attributes.
One is the column-count attribute, which is how many columns it is divided into.
One is the column-gap attribute, which sets the distance between columns.

Code:

<!DOCTYPE html>
<html>
<head>
    <style>
		*{
			margin: 0;
			padding: 0;
		}
        .box {
            column-gap: 10px;
        }
        .item {
            margin-bottom: 5px;
        }
        .item img{
            width: 100%;
            height:100%;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">
        <img src="jsbase/瀑布流/picture/1.jpg" alt="" />
    </div>
	//标签省略
	<div class="item">
	    <img  src="jsbase/瀑布流/picture/8.jpg" alt="" />
	</div>
</div>
<script type="text/javascript">
	window.onload = function(){
		(function(docs, win) {
			htmlSize = function() {
				var value = document.documentElement.clientWidth
				var deviceWidth = Math.max(750, value);
				document.querySelector(".box").style.columnCount = Math.floor(deviceWidth / 500);
			};
			htmlSize();
			window.onresize = function(){
				htmlSize();
			}
		})(document, window);
	}
</script>
</body>

Three, flex flexible layout to achieve waterfall flow

Thinking analysis:

1. Use flexible vertical layout and allow line breaks.

Code:

<!DOCTYPE html>
<html>
<head>
	<style>
		.box {
		  display: flex;  
		  flex-flow:column wrap;
		  height: 100vh;
		  overflow-y: scroll;
		}
		.item {
			margin: 10px;
			/* width: calc(100%/3 - 20px); */
		}
		.item img{
			width: 100%;
			height:100%;
		}
</style>
</head>
<body>
	<div class="box">
		<div class="item">
			<img src="jsbase/瀑布流/picture/1.jpg" alt="" />
		</div>
		//...标签省略
		<div class="item">
			<img src="jsbase/瀑布流/picture/8.jpg" alt="" />
		</div>
	</div>
	<script type="text/javascript">
		window.onload = function() {
			(function(docs, win) {
				htmlSize = function() {
					var value = document.documentElement.clientWidth
					var deviceWidth = Math.max(750, value);
					console.log(`calc(100% / ${Math.ceil(deviceWidth / 500)})`);
					document.querySelector(".item").style.width = `calc(100% / ${Math.floor(deviceWidth / 500)})`;
				};
				htmlSize();
				window.onresize = function() {
					htmlSize();
				}
			})(document, window);
		}
	</script>
</body>

Four, contrast

1. The arrangement of the elements is different, the left is JQ, the right is the latter two, that is, one vertical row and one horizontal row, the visual effects are similar;

2. The flex flexible layout realizes that the waterfall flow is scrolling left and right, and the other two methods are scrolling up and down;

3. The latter two are mainly dependent on css, so there is no need to worry about the problem that js cannot obtain element nodes after the elements are dynamically generated;

4. JQ conforms to mainstream aesthetic standards and has strong practicability.