0

I am trying to get Masonry to work properly in my app and it is just not working the way I would like it to. Nothing is aligning properly in Masonry (big gaps are being left everywhere).

I load a bunch of divs into a region. There is infinite scrolling, and as I scroll, more content is added to the screen.

This is what I do first (it is done after loading the first 20 results into my viewport). Note that after doing this, Masonry is applied, but nothing is aligned properly (There are large gaps between everything). 

@resultsRegion.$el.masonry({itemSelector: ".presentation-safe.grid-item",
  columnWidth: '.item',
  percentPosition: true})

To add more results once I trigger the infinite scrolling:

@displayCollection.add(results)
if @cardLayout == 'flow'
  @resultsRegion.$el.masonry('appended')

All of the content is added properly and Masonry is getting applied, though large gaps still remain between all of my content.

I have also tried @resultsRegion.$el.masonry('reloadItems') but that messes up all of my styles for everything on the page.

tommybond
  • 650
  • 6
  • 19
  • Have you tried using the imagesLoaded plugin? I find that masonry never works as expected without it: http://desandro.github.io/imagesloaded/ http://stackoverflow.com/questions/20542309/using-masonry-with-imagesloaded – ReLeaf Sep 16 '15 at 23:25
  • @ReLeaf I haven't tried that, but I will. Thank you! – tommybond Sep 16 '15 at 23:33

0 Answers0