Yannis Chatzikonstantinou / Freetile.js. Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it's children in a layout that makes optimal use of screen space, by "packing" them in a tight arrangement. Freetile has been the layout engine behind Assemblage and Assemblage Plus for almost two years, and now it becomes available as an independent Open Source project.
Features Freetile is inspired by similar, existing efforts such as Masonry, vGrid and Wookmark. It allows for any size of elements to be packed without using a fixed-size column grid, so you don't have to worry about specifying a column width appropriate to the size of your elements.The algorithm that evaluates each possible insertion position is easily customizable, allowing for different preferences to be expressed, e.g. a preference to left- or right-alignment of elements, or proximity between certain elements. Usage. Isotope. Isotope Stack ( Filter / Sort / Animation / Responsive ) Suggestion - realmacsoftware.
Masonry Layout Stack. Create Magical Layouts With Isotope A Great jQuery Plugin | Web Devloper and JavaScript Nerd | Ben Holland. Isotope is an exquisite jQuery plugin for magical layouts that can readjustment themselves depending on the browsers dimensions. Along with filtering and sorting functionality, this is a truly powerful plugin. I came across the plugin whilst developing a project that required blocks of various heights to fit perfectly in the page. Accompanied by the Infinite Scroll plugin, Isotope made the project a great success. Check out what I'm talking about here... See a DEMO So How Can I Use Isotope In My Projects?
It's really simple. It's All Very Nice, But What Can I Change? Isotope comes with a wide range of options for you to select, ranging from changing the type of animation engine it uses (CSS or animate) to adjusting whether the items are sorted in ascending order or descending. See a list of all the options OK, So How Do I Implement This? Well, the most basic implementation is to tell the plugin what container to apply itself too and what items to sort. That's it really. How To Build A Site That Works Like Pinterest | Web Devloper and JavaScript Nerd | Ben Holland. Ok, if you have no idea what Pinterest is then go check it out. It is a website that lets you organise and share all your favourite things by using pinboards. It really is a cool site, but what I find interesting is how these pinboards are laid out. I've seen something similar before with jQuery Isotope where blocks are perfectly positioned into a series of columns, and as the screen size changes, the columns re-shuffle to make sure they fit inside the screen.
So the purpose of this tutorial is to re-create this responsive block effect ourselves... Click here to see a demonstration of what we're making Tip: resize the window The Theory Right, before jumping into the code, we need to get the theory sorted in our heads. From this data, we then calculate the number of possibly blocks that would fit in the window. Setting Up The Blocks So there's some information about the theory behind both Pinterest and jQuery Isotope. The HTML Structure <body onload="setupBlocks();"><! The CSS The jQuery.