DOM manipulation

[adramelech]

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");
  img.setAttribute("src",image.urls.regular)
  li.append(img)
  return li
}

 images.map((image,i)=>{
    uls[i%uls.length].append(generateLI(image))
  })

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.

images.map((image,i)=>{
    const a = Array.from(uls)
    const dwarf = a.reduce((acc,ul)=>{
      if (ul.getBoundingClientRect().height<acc.getBoundingClientRect().height) return ul
      return acc
    },a[0])
    dwarf.append(generateLI(image)
  })

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