Collect data from item element and rearrange their order in the layout with sorting.
[**See Demo: Sorting**](../demos/sorting.html)
## Markup
In our example, each item element has several data points that can be used for sorting. There's the elemental symbol, number, name of the element, weight, and category.
Any group of similar items have their own data. It could be a text value, like a title or tag, or a numerical value, like a measurement or grade. For our example, each item element has several data points that can be used for sorting. There's the elemental symbol, number, name of the element, weight, and category.
{% highlight html %}
@ -121,7 +120,7 @@ There is an additional sorting data built in to Isotope `'original-order'`. Sort
## sortAscending
By default, Isotope sorts data in ascension. If our data for name is "Gold, Antimony, Lead, Iron, Silver", when sorted by name, the elements will be ordered ABC.. : "Antimony, Gold, Iron, Lead, Silver." To reverse the order and sort data in descension, set the `sortAscending` option to `false`.
By default, Isotope sorts data in ascension. If our data for name is "Gold, Antimony, Lead, Iron, Silver", when sorted by name, the elements will be ordered ABC.. : "Antimony, Gold, Iron, Lead, Silver." To reverse the order and sort data in descension, set `sortAscending` to `false`.
Most layout modes (i.e masonry, fitRows) need to measure the size of each item to appropriately account for its space in the layout. Unloaded content like images and @font-face fonts can throw off layout and cause item elements to overlap one another. Ideally, Isotope layouts should be initialized after all inner content has loaded.
Most layout modes (i.e masonry, fitRows) need to measure the size of each item to appropriately account for its space in the layout. Unloaded media files like images and @font-face fonts can throw off layout and cause item elements to overlap one another. Ideally, Isotope layouts should be initialized after all inner content has loaded.
### Images
## Images
#### Inline dimensions
### Inline dimensions
For images, the best method is to specify the width and height of images inline.
@ -25,7 +25,7 @@ For images, the best method is to specify the width and height of images inline.
If you’re using a PHP-based CMS, you can use the [getimagesize](http://php.net/manual/en/function.getimagesize.php) function.
#### imagesLoaded plugin
### imagesLoaded plugin
The next best solution is to use the imagesLoaded plugin included with Isotope. It's a fork of [Paul Irish's plugin](https://gist.github.com/268257) that finds all the images in a context, and fires a callback function once all the images have loaded.