In the process of front-end development, it is inevitable to encounter the need for waterfall flow layout, so I will show you the code and analyze it with you
First, your directory structure should be consistent with that of the author:
JS authors have wrapped a small tool for retrieving DOM elements
Tools.js looks like this:
/** * Resolves the compatibility issue of finding elements by class name *@param ClassName Name of the class to be searched *@param Context Optional, find the context of the element: that is, find the descendant of the specified context element. If this parameter is not passed, the default is document *@return The collection of elements found (HTMLCollection or Array) */
function getElementsByClassName(className, context) {
// If context is not passed, the default is document
context = context || document;
/ / if the browser itself to support the use of the document. The getElementsByClassName method, direct call
if (context.getElementsByClassName) // It is supported
return context.getElementsByClassName(className);
/* * * is not supported
// Define an array to hold the search results
var result = [];
// Find all elements
var elements = context.getElementsByTagName("*");
// Iterate over all elements
for (var i = 0, len = elements.length; i < len; i++) {
// Get the class name currently traversed to the element
var classNames = elements[i].className.split("");
// Iterate over all the class names of the current element
for (var j = 0, l = classNames.length; j < l; j++) {
// Check whether the name of the class traversed is the same as the name of the class to be found
if (classNames[j] === className) {
// If yes, the current traversal is the element to be found
result.push(elements[i]);
break; }}}// return the search result
return result;
}
/** * Find elements * by selector@param Selector # id.className Element *@param Context Optional, find the context of the element: that is, find the descendant of the specified context element. If this parameter is not passed, the default is document *@return Returns the element */ found by the selector
function $(selector, context) {
// Query in the document by default
context = context || document;
if (selector.indexOf("#") = = =0) // id
return document.getElementById(selector.slice(1));
if (selector.indexOf(".") = = =0) // className, call a custom function to solve the problem of finding element compatibility by className
return getElementsByClassName(selector.slice(1), context);
// element
return context.getElementsByTagName(selector);
}
Copy the codeThe images folder is where you put the example images, so you can take any number of images and put them in the images folder and I’ve just written the CSS styles directly into the HTML, or you can extract them separately. The index.html code looks like this:
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#container {
width: 95%;
position: relative;
margin: auto;
}
#container div {
width: 200px;
padding: 10px;
border: 1px solid;
border-radius: 5px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
#container div img {
width: 200px; /* Make all images the same width */
}
</style>
</head>
<body>
<div id="container">
<div><img src="./images/imgs (1).jpg" alt=""></div>
<div><img src="./images/imgs (2).jpg" alt=""></div>
<! - Omit useless code here, copy as many images as you have this format is OK. -->
<div><img src="./images/imgs (30).jpg" alt=""></div>
</div>
<script type="text/javascript" src="./js/tools.js"></script>
<script type="text/javascript">
window.onload=function(){ // Avoid code execution before importing tools.js files
let spacing = 10./ / spacing
divs = $("div", $("#container")),// Get all divs under #container
len = divs.length, // How many divs are there
colWidth = divs[0].offsetWidth, // Get the width of div
cols = 5; // Limit one line to five images
let height = new Array(cols); // Define an array with capacity 5
height.fill(0); // Fill each element in the array with 0
for(let i = 0; i < len; i++){// Loop through each div, setting the location
let colIndex = min(height); // Call min to get the shortest subscript in each row of the array
// Set location
divs[i].style.top = height[colIndex] +10+"px";
divs[i].style.left = (colIndex + 1)*spacing + colIndex * colWidth + "px";
// add column height
height[colIndex] += divs[i].offsetHeight + 10;
}
// A function to find the minimum index of an array element
function min(array){
return array.indexOf(Math.min(... array))// Returns the minimum subscript of the passed array}}</script>
</body>
</html>
Copy the codeThe interpretation of the code is marked to the code of the comments, if there are direct comments on the message can not understand oh, quickly start to write pictures to try the effect!
Finally, attach the author’s renderings!
All beautiful women, ha ha! Beautiful!!!!
