How to implement image waterfall without using JS to create the DOM? [on hold]

60
August 12, 2019, at 2:40 PM

I have the following scenario:

Cannot use JS to create DOM to achieve image waterfall flow

//First try
<div class="container-masonry">
  <div class="photoItem" v-for="imagesList" :key="{{item.id}}">
     <img :src="{{item.img}}" >
  </div>
</div>

I tried the following:

1.Using CSS:

.container-masonry{
  column-count: 2;
  column-gap: 2%;
  width: 96%;
  margin: 0 auto;
}
.photoItem{
  margin: 1% 0;
  break-inside: avoid;
}

The desired effect is achieved, but the images are sorted not from left to right, but from top to bottom

Can you help me?

READ ALSO
Images show up locally but not in remote in request server side

Images show up locally but not in remote in request server side

I just pushed my flask application and went live using HerokuI know Heroku doesn't store files long term and only on the instance, but I can't even access the files via request

80
Use regex to capture characters between colon and comma

Use regex to capture characters between colon and comma

EsLint is outputting errors when capturing a string that has already output a string stating the weather

82
How to encrypt/decrypt URL parameters in Google Apps Script?

How to encrypt/decrypt URL parameters in Google Apps Script?

I want to Encrypt/Decrypt the parameter on the URLBecause when the user deliberately changes the id parameter, it still returns the result

54
How to Accessing the animal object, assign the &#39;animalName&#39; variable to the &#39;latinName&#39; key on the object. return the animalName variable [on hold]

How to Accessing the animal object, assign the 'animalName' variable to the 'latinName' key on the object. return the animalName variable [on hold]

In this exercise you will be given an object called 'animal' Create a new variable called 'animalName' Accessing the animal object, assign the 'animalName' variable to the 'latinName' key on the objectreturn the animalName variable

62