<>1, What is a waterfall

The visual expression is uneven multi column layout

<>2, Why use waterfall flow

* Demand one : There are many pictures to show
* Demand 2 : Picture not OK Not to scale Scale stretch
* Demand 3 : Picture sizes vary
<>3, Analytical principle of waterfall flow

<>3.1, Picture size : Equal width and unequal height

<>3.2, Waterfall flow algorithm

Now there are four pictures of different sizes

Now insert the fifth picture

Inserted in the first column Minimum height Under the picture of

in other words : The location of the picture is :

* position:absolute
* left: Index of minimum height * Width of picture
* top: The height of the picture with the minimum height

<>3.3, Difficulties and analysis

* How to get the minimum height Image index ?
You can set an array , For example, one line has Four columns :

Array at the beginning : [100, 200, 50, 150], So the minimum height is 50, Index is 2

Set the 5 Zhang put it in No 3 Picture below

So the array becomes :[100, 200, 150, 150], So the minimum height is 100, Index is 0

Set the 6 Zhang put it in No 1 Picture below

...... and so on

* How to know a line has How many columns ?
Number of columns equal to : Screen width / ( Width of each picture + margin value ), Round down

<>3.4, Code demonstration

You can find your own image address to fill in
effect

<div class="box"><img src="img/ capture 1.png"></div> <div class="box"><img src="
img/ Advanced mathematics .jpg"></div> <div class="box"><img src="img/Oracle data base .jpg"></div> <div
class="box"><img src="img/ penguin .jpg"></div> <div class="box"><img src="img/abcd.jpg
"></div> <div class="box"><img src="img/C language .jpg"></div> <div class="box"><img
src="img/ Recollection pigsty .jpg"></div> <div class="box"><img src="img/java Fundamentals of language .jpg"></div> <
div class="box"><img src="img/Login.jpg"></div> <div class="box"><img src="
img/ Little fat pig .jpg"></div> <div class="box"><img src="img/book2.jpg"></div> <div class=
"box"><img src="img/book3.jpg"></div> * { margin: 0; padding: 0; } body {
background-color: #f1ebeb; } .box { position: absolute; width: 300px; padding:
10px; box-sizing: border-box; } img { width: 100%; box-shadow: 3px 3px 3px 3px
rgba(0, 0, 0, .1); } window.onload = () => { waterFall() } window.onresize = ()
=> { waterFall() } // Function of waterfall flow function waterFall() { // 1, Find out the number of columns let box = [...
document.getElementsByClassName('box')]; let boxWidth = box[0].offsetWidth; //
The width of the current picture let screenWidth = document.body.clientWidth; // Width of the entire screen let cols = Math.
floor(screenWidth / boxWidth) // Number of columns // 2, Create height array , Storage height value let heightArr = new Array(
cols); for(let i = 0; i < cols; i++) { heightArr[i] = 0; } //
3, Picture traversal loop : The first row is not positioned , Take height value // Back row location box.forEach((item, index) => { // 3.1 Take out the height of the picture
let boxHeight = item.offsetHeight; // 3.2 Get index of minimum height let minIndex = getMinArray(
heightArr); // 3.3 location item.style.left = minIndex * boxWidth + 'px'; item.style.
top= heightArr[minIndex] + 'px'; // 3.4 Add height and add to array heightArr[minIndex] +=
boxHeight}); } // Get index of minimum height function getMinArray(arr) { let minValue = arr[0];
let minIndex = 0; for (let i = 1; i < arr.length; i++) { if(arr[i] < minValue) {
minValue= arr[i]; minIndex = i } } return minIndex; }

Technology
©2019-2020 Toolsou All rights reserved,
JAVA Detailed explanation of anomalies MySQL An interview is a must ! How to use it quickly html and css Write static page R Language cluster analysis case Dialogue between apple and Nissan suspended ,Apple Car How's it going ?java Realize the function of grabbing red packets SpringBoot practice ( five ):mybatis-plus In BaseMapper,Iservice and ServiceImpl Google says home office affects work efficiency !2021 Return to offline office in 2010 about keras use fit_generator Encountered in StopIteration Programmer Tanabata Valentine's Day confession code