The effect

Dom structure

You can add DOM elements as needed

<div class="conten">    <div class="imgs">      <img src="" alt="">    </div></div>
Copy the code

JavaScript part

window.onload

Methods are used to execute a method as soon as the web page has loaded, that is, when the HTML document has loaded.

Because when we manipulate the DOM; If you don’t wait for the page to finish loading; Page may not be retrieved; Or undefined; So you need to execute the code in window.onload

window.onload = function () {  
    onFlow()
}
Copy the code

OnFlow () function

The general idea of the function is as follows:

  • First get the width of the Conten box

  • Then get the width of the IMGS box; After knowing the width of the two boxes, you can know how many IMGS boxes can fit in a row (NUMS).

  • Then it iterates through all the boxes of imGS and decides if numS is less than the box of IMGS, the height of IMGS is saved in the arrHeight array

  • If NUMS is greater than the imGS box; To find which box in the first row is the shortest, place the first box in the second row below the lowest box in the first row, and so on

  • Get the offsetLeft of the shortest box; And used the locator to locate it

  • Finally, assign the height of the lowest box = the height of the lowest box + locate the past box

OnFlow () complete code

The function onFlow () {/ / 1. Initialization data let conten = document. GetElementsByClassName (' conten) [0]; / / 2. Get the data width of high let onImgs = document. The getElementsByClassName (' imgs) / / acquisition box width let contenWidth = conten. OffsetWidth / / Let imgsWidth = onImgs[0]. OffsetWidth // Get how many rows can be placed in a row  let arrHeight = [] for (let j = 0; j < onImgs.length; J ++) {if (j < nums) {arrheight. push(onImgs[j].offsetheight)} else {let objMin = {if (j < nums) {if (j < nums) {arrheight. push(onImgs[j].offsetheight)} else {let objMin = { ArrHeight [0], minIndex: 0} for (let n = 0; n < arrHeight.length; N ++) {if (arrHeight[n] < objmin.mins) {objmin.mins = arrHeight[n] objmin.minindex = n} onImgs[objMin.minIndex].offsetHeight onImgs[j].style.position = 'absolute' onImgs[j].style.left = OnImgs [objmin.minIndex]. OffsetLeft + 'px' Because I made a margin; OnImgs [j]. Style. Top = arrHeight[objmin.minIndex] + 10 + 'px arrHeight[objMin.minIndex] + onImgs[j].offsetHeight + 10 } } }Copy the code

Add images

/ / click on the button to add elements (image) let BTN = document. The getElementsByClassName (' BTN) [0] BTN. AddEventListener (' click 'init)Copy the code

Init () adds functions

function init() { let Oimg = [ 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3355464299, & FM = 26 & gp = 0. 584008140 JPG', 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3365503159, & FM = 26 & gp = 0. 1655500687 JPG',] for (let I = 0; i < Oimg.length; i++) { var div = document.createElement('div') div.setAttribute('class', 'imgs') var Omgs = new Image; Conten.appendchild (div) // Create img element omgs.src = Oimg[I] // connect to SRC div.appendChild(Omgs) // attach img to div conten.appendChild(div) // Then mount the div element to the IMGS} onFlow()}Copy the code