Skip to content

A small JavaScript class to programmatically position content with variable widths and heights and minimizing whitespace gaps. Imagine Pinterest on steroids (Pinterest only allows for variable height). By Jason Mayes

Notifications You must be signed in to change notification settings

jasonmayes/Smart-Content-Placer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Smart-Content-Placer

A small JavaScript class to programmatically position difficult content. What do I mean by that? Well lets assume you have many images which are different widths and heights. How do you place them on a page such that there are no "gaps"? This is basically a constrained bin packing problem. Using just CSS this is a no go as you will end up with blocks of whitespace appearing, thus some JavaScript is required. This little component allows for variable width and height content - imagine Pinterest on steroids (Pinterest only allows for variable height).

Live Demo

Please read comments in JavaScript for examples on how to use.

A live demo is available on my website - resize the window to see how it adapts: http://jasonmayes.com/projects/contentPlacer/

Browser Support

Key features

  • Fully responsive (up to the largest element width used).
  • Allows for variable width AND height content. All content must be a multiple of a base unit size.
  • Works with any type of responsive content (not just images).
  • Supports margins between content.
  • Works in all modern browsers.
  • Supports transitions for initial display and for fluid repositioning of content.
  • Requires no 3rd party libraries to work - pure native JavaScript.
  • Lightweight and efficient.
  • Fully customizable - all transitions / style is defined via CSS.

Why does this exist?

After a quick Google it seemed many other existing solutions required some third party library to work (jQuery), or were not as efficient as I wanted. I therefore decided to roll my own from a blank canvas to keep it as lightweight and efficient as possible.

Browser support

All popular browsers supported. Chrome, Firefox, Safari, Opera, Internet Explorer 9+ and I have tested on Android/iOS which seems to be fine too. Browser Support

Got suggestions? Feedback? Feature requests? Tell me!

Really, I like to hear feedback, and love to see what projects you have used it in. Feel free to give me a shoutout if you have used it. Talk to me: Via Google+, twitter, or my website.

Terms

Feel free to use in your own personal projects. I only ask you keep any disclaimers with my code (even if code is modified / minified) so others can find the original source should they wish to get updates or support. A link back / social media shout out is always appreciated to help others discover it (and for me to see what great things it is being used for) but not required :-)

If you plan to use in a commercial project please contact me first if you are unable to adhere to the above terms.

About

A small JavaScript class to programmatically position content with variable widths and heights and minimizing whitespace gaps. Imagine Pinterest on steroids (Pinterest only allows for variable height). By Jason Mayes

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published