how to replicate pinterest.com’s absolute div stacking layout [closed]

by

I wrote the Pinterest script. The ID’s are unrelated to the layout, and are used for other interaction-related JS. Here’s the base of how it works:

Beforehand:

  • Absolutely position the pin containers
  • Determine column width
  • Determine margin between columns (the gutter)

Setup an array:

  • Get the width of the parent container; calculate the # of columns that will fit
  • Create an empty array, with a length equaling the # of columns. Use this array to store the height of each column as you build the layout, e.g. the height of column 1 is stored as array[0]

Loop through each pin:

  • Put each pin in the shortest column at the moment it is added
  • “left:” === the column # (index array) times the column width + margin
  • “top:” === The value in the array (height) for the shortest column at that time
  • Finally, add the height of the pin to the column height (array value)

The result is lightweight. In Chrome, laying out a full page of 50+ pins takes <10ms.

More Related Contents:

  1. Fading elements in and out without changing the layout of the page
  2. How I show div by scale effect and give her text
  3. jQuery Adding new option to select element doesn't pick up the string [closed]
  4. Slide down button to show text HTML CSS
  5. Using jQuery to center a DIV on the screen
  6. CSS rotation cross browser with jquery.animate()
  7. Bootstrap 3 Collapse show state with Chevron icon
  8. Add and remove a class on click using jQuery?
  9. css width: calc(100% -100px); alternative using jquery
  10. Number nested ordered lists in HTML
  11. How do you add pseudo classes to elements using jQuery?
  12. Use jQuery/CSS to find the tallest of all elements [duplicate]
  13. jQuery find element by data attribute value
  14. How do I get a fixed position div to scroll horizontally with the content? Using jQuery
  15. jQuery override default validation error message display (Css) Popup/Tooltip like
  16. What is the simplest jQuery way to have a ‘position:fixed’ (always at top) div?
  17. Can I fade in a background image (CSS: background-image) with jQuery?
  18. Getting the actual, floating-point width of an element
  19. jQuery .css(“left”) returns “auto” instead of actual value in Chrome
  20. Bootstrap 4 with remote Modal
  21. Animate an element’s width from 0 to 100%, with it and it’s wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery
  22. Changing the child element’s CSS when the parent is hovered
  23. CSS for the “down arrow” on a element?
  24. Justify divs with CSS to fill width of parent container [duplicate]
  25. How to create a diagonal line within a table cell?
  26. Show/ Hide Table Column with colspan using jQuery
  27. Weird IE8 layout glitch – why does the body background disappear?
  28. jQuery css gradient
  29. Remove vertical lines in jqGrid
  30. Removing multiple classes (jQuery)

Leave a Comment