Waterfall flow layout

Catalog

demand

Ideas

Code implementation

Realization effect

Problems and corrections

Effect after correction

summary

---

demand

The so-called waterfall flow layout , It contains several columns of equal width , Place pictures in each column 、 Video etc. , The placed elements are of equal width , Therefore, it may be unequal . When new elements come , The lower column will be inserted , In this way, uneven 、 Visually, the layout is like a waterfall .

Let's simplify it here , As long as two columns of equal width layout show pictures .

Ideas

Two column layout , Use it directly flex The layout can be realized . however , It can't be set up here align-items by center, If set, the picture column will be centered , Does not conform to the visual effect of waterfall flow . I set left and right Two , The width of the two columns is equal , The structure and style are basically finished .

Then write JavaScript. The logic is , Judge the present left and right Height （ I use clientHeight）, If on the left <= On the right , Then put it on the left , Otherwise, put it on the right . Go through all the pictures , Just put it in according to this logic .

Code implementation

html part

<!--  Waterfall flow parent container  -->
  <div class="container">
    <!--  Two columns of equal width layout  -->
    <div class="col left"></div>
    <div class="col right"></div>
  </div>

css part

    .container {
      width: 700px;
      background-color: aliceblue;
      margin: auto;
      /* flex Layout  */
      display: flex;
      align-items: flex-start;
    }

    .col {
      flex-basis: 350px;
    }

    .col img {
      /*  Fix the width of the picture  */
      width: 100%;
    }

JavaScript part

  //  Get three elements 
  let container = document.getElementsByClassName('container')[0]
  let left = document.getElementsByClassName('col')[0]
  let right = document.getElementsByClassName('col')[1]

  //  Insert a picture 
  function initImg() {
    for (let i = 1; i < 27; i++) {
      let img = new Image();
      img.src = "./pictures/" + i + ".jpg"
      if (left.clientHeight <= right.clientHeight) {
        left.appendChild(img)
      } else {
        right.appendChild(img)
      }
    }
  }
  
  initImg()

As the code shows , Get the parent element and the left and right columns , Then traverse each picture , Judge the insertion in turn . It looks perfect , But is it true ？

Realization effect

  It looks perfect , It also looks like a waterfall . But when I pull it to the bottom of the page, I find ：

A large piece on the left is empty , All on the right . This is obviously not right , Because according to logic , Shorter on the left , It should be added on the left .

Problems and corrections

The problem is ,img Loading of is an asynchronous process . Let's look at the for loop ：

  //  Insert a picture 
  function initImg() {
    for (let i = 1; i < 27; i++) {
      let img = new Image();
      img.src = "./pictures/" + i + ".jpg"
      if (left.clientHeight <= right.clientHeight) {
        left.appendChild(img)
      } else {
        right.appendChild(img)
      }
    }
  }

new 了 Image After the object , Specified its src, Then immediately judge the height of the left and right sides . At this time ,img It's not loaded yet . However ,for The loop will not wait for it to load . After the next picture is generated , Will also judge immediately , But at this time, the previous picture has not been put on the page , So the left and right height is probably wrong , This leads to wrong judgments . This appears in the figure above , There are many pictures in the right column , And the left column is blank .

The solution is , Write this loop asynchronously , Only after the last picture is loaded , To judge the next picture .

It's easy to think , Use Promise Complete asynchronous judgment . But for the loop Promise, It is difficult to pass clearly then Change to advance . therefore , I decided to adopt async and await.

This requires another method to be encapsulated , This method returns Promise, stay Promise Load a picture in . Then traverse all the pictures , Use async/await, Call this method in turn , You can get the results .

And in the Promise in , When do we call resolve Well ？ This requires monitoring img Of onload event , Set up onload Callback function for event , Call in callback function resolve that will do .

Through the analysis of , Improve the code again ：

  //  Load first index A picture 
  function loadIndexImg(index) {
    return new Promise((resolve, reject) => {
      //  Currently loaded pictures 
      let img = new Image();
      img.src = './pictures/' + index + '.jpg'
      img.onload = () => {
        if (left.clientHeight <= right.clientHeight) {
          left.appendChild(img)
        } else {
          right.appendChild(img)
        }
        resolve();
      }
    })
  }

  //  Insert a picture 
  async function initImg() {
    //  After loading and inserting the picture, you can judge the next one , So we use async/await
    for (let i = 1; i <= 26; i++) {
      await loadIndexImg(i)
    }
  }

  initImg()

You can see , stay initImg in , In turn, calls loadIndexImg, And it is called asynchronously . Load the next picture after the picture is loaded , The effect should be ok .

Effect after correction

The effect is very good ！！！

summary

This paper realizes a simple two column waterfall layout , You need to use Promise Wait for asynchronous operation .