DOM manipulation

I was trying to create a image gallery with lazy loading. Initially I was appending each image to the unordered list like this

const generateLI = (image) =>{
  const li = document.createElement("li");
  const img = document.createElement("img");
  return li

It works fine but the problem was it cause a difference in each uls height because each image has a different height.

So I tried to check the height of each ul in each iteration of the images array and append the image to the smallest ul.,i)=>{
    const a = Array.from(uls)
    const dwarf = a.reduce((acc,ul)=>{
      if (ul.getBoundingClientRect().height<acc.getBoundingClientRect().height) return ul
      return acc

It seems fine on the initial fetch. But from the second fetch all the images are adding to the smallest ul.

How can I fix this. Thanks in advance

Code so far

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.