

Masonry, infinite scrolling and Django - chrisjones
http://brack3t.com/masonry-infinite-scrolling-and-django.html

======
mcs
One of the things i've recently built has an infinite scrolly feed of items,
and <http://airbnb.github.com/infinity/> is what I ended up using after using
Masonry for a long time.

Edit: along with Scroll Events <http://james.padolsey.com/demos/scrollevents/>

------
armored_mammal
The example page (Tindie) is slow and chunky-scrolling on latest Firefox with
my machine (16 gigs of RAM and quad Xeon)... It eats CPU. Something wrong with
it. Doesn't happen in Chrome.

I like the typography on the blog, though.

------
attheodo
Maybe add some sort of visual hint on Tindie to show that new content is being
loaded. It takes sometime to load the new chunk and someone might think
there's nothing more to see down there.

------
bryogenic
Did I miss the link to the example showing it in action? Or is that left as an
exercise for the student?

~~~
kennethlove
\---There's no demo because it behaves exactly like the Masonry example for
infinite scrolling and Pinterest.---

Screw it, I added a link to the example. It's on tindie.com.

~~~
amccloud
I'm looking at tindie.com and I see the inifinite scroll but I don't get the
need for masonry. All The blocks appear to be the same width and height.

~~~
kennethlove
You're right. We had a staggered layout, a la Pinterest, until last week. Now
that we've evened up everything, I'm sure we could remove Masonry. It's
currently still using it, though.

------
TommyDANGerous
This is awesome read! Thanks

------
danso
Oh nice, the best takeaway from this (for me) was that desandro apparently has
created a hack to deal with the whole is-an-image-in-cache-or-isn't-it
problem:

<https://github.com/desandro/imagesloaded>

~~~
GBKS
The best way to avoid this altogether is to set the image width and height in
the img tag. That way, content can be shown right away, even before the images
are loaded.

Another thing to be careful with are social buttons, whose height may change
after the initial item is rendered. That's easily avoided with a fixed CSS
height, though.

~~~
kennethlove
Yes. We specify a height and width in the HTML and the CSS, but it's still
nice to pay attention to the images' loaded status.

