jQuery Nested
Nested is a jQuery plugin which allows you to create multi-column, dynamic grid layouts. Unlike other libraries and jQuery plugins similar to Nested, this is (as far I as I’ve know) the first script out there that allows you a complete gap-free layout. How is this done? Use a container element with a group of child items that use the chosen option selector setting (default: .box). <div id="container"><div class="box size11"></div><div class="box size12"></div><div class="box size21"></div><div class="box size22"></div> ... Sizing of items are handled by adding sizeWH where W is the number of columns the box shall use and H is the number of rows the box shall use. selector Default .box minWidth Default 50 minColumn Default 1 gutter resizeToFit Default true If true, any box bigger than the gap will be resized to fill the gap. resizeToFitOptions Default option below resizeAny If true, any box bigger or smaller than the gap will be resized to fill the gap. Default true animate Default false speed Default 20
zonear/isotope-perfectmasonry
Responsive Img - a jQuery Plugin for Responsive Images
Three Super Easy Ways to Pull Off a Masonry Layout
Three Super Easy Ways to Pull Off a Masonry Layout Masonry style layouts push the boundaries of creative layout techniques. I personally love how capable they prove to be at maximizing the efficiency of galleries containing items with varying heights. Every bit of screen space is used and the result can be downright mesmerizing. Today we’re going to dive into the concept, ideas and popular techniques that are currently prevalent in masonry style layouts. We’ll learn three different methods for pulling off a masonry layout, discuss the ins and outs of each and make sure that the result is beautifully responsive and reflows based on browser width. What Is a Masonry Layout? When you float objects in CSS, the browser arranges elements first horizontally then vertically. However, if the objects have variable heights, the results are much more difficult to predict. The obvious quandary here is how to pull off a nice tight grid that with items that have variable heights. jQuery Masonry Wookmark
Mobiscroll - The customizable HTML5 spinner control for touch devices like smartphones and tablets
Making a Beautiful HTML5 Portfolio
Martin Angelov In today’s tutorial we will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more. The HTML The first step is to write down the markup of a new HTML5 document. index.html <! In the body, there are a number of the new HTML5 elements. The #stage unordered list holds our portfolio items. You can put whatever you want in these li items and customize the portfolio further. Beautiful HTML5 Portfolio with jQuery The jQuery What the Quicksand plugin does, is compare two unordered lists of items, find the matching LIs inside them, and animate them to their new positions. First we need to listen for the ready event (the earliest point in the loading of the page where we can access the DOM), and loop through all the li items detecting the associated tags. script.js – Part 1 Each tag is added to the itemsByTags object as an array. Great!
Media Queries / Dynamic resolution dependent layouts
Packery
Media Queries
Abstract HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Status of This Document This section describes the status of this document at the time of its publication. A W3C Recommendation is a mature document that has been widely reviewed and has been shown to be implementable. This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. Please see the Working Group's implementation report and the Media Queries Test Suite. Also see the Disposition of comments and a list of changes relative to the previous Proposed Recommendation. Table of Contents 1. (This section is not normative.) As are these: 3. 5.
jQuery Quicksand plugin
Quicksand Reorder and filter items with a nice shuffling animation. Activity Monitor 348 KB Address Book1904 KB Finder 1337 KB Front Row 401 KB Google Pokémon 12875 KB iCal 5273 KB iChat 5437 KB Interface Builder 2764 KB iTuna 17612 KB Keychain Access 972 KB Network Utility 245 KB Sync 3788 KB TextEdit 1669 KB Demo seems sluggish? Disable CSS3 scaling and try again. Isn’t it cool? Download Version 1.4 Demos & Docs Fork on GitHub Powered by jQuery – Made by @razorjack from agilope, icons design by Artua Design by @riddle
jQuery Masonry
Related:
Related: