reloadItems - what does it actually do?

[cloakedninjas]

Not sure if this is me failing to understand, but Recollects all item elements is quite a vague method description.

My use case is that I've injected new content into a preexisting Masonry-enabled container, and I now want Masonry to adapt to the newly added items.

Masonry is doing something: It's adding position: absolute to the new children ... but nothing else.

Test case: https://codepen.io/anon/pen/qQJZpE

[desandro]

Almost there! The new HTML has been added to the page, all that HTML has been re-read and added to Masonry's collection of Items. The last missing piece to is layout the new items.

  grid.insertAdjacentHTML('beforeend', newItems);
  msnry.reloadItems();
  msnry.layout();

See demo https://codepen.io/desandro/pen/72c5217b212384e38c6cf7d945fb7c38/

[emreordukaya]

Almost there! The new HTML has been added to the page, all that HTML has been re-read and added to Masonry's collection of Items. The last missing piece to is layout the new items.

  grid.insertAdjacentHTML('beforeend', newItems);
  msnry.reloadItems();
  msnry.layout();

See demo https://codepen.io/desandro/pen/72c5217b212384e38c6cf7d945fb7c38/

Hi, I use this code. #1080 Yes masonry design ok. But only divs shown on page as an empty. I get data via script tags. Set script tags via jquery. so for excample I set 15 script tags for 15 divs. 15 scripts get data as an async. I can get data and bind but only the last row has a height. others 0 height. Then I tried this code but now all of divs is empty. I look browser as a developer, I see script tags directly. but it must be converted iframe in html.