Join Morten Rand-Hendriksen for an in-depth discussion in this video What is jQuery Masonry?, part of WordPress: Building Responsive Themes.
- View Offline
If you've spent any amount of time on the Internet in the past few years, you've likely come …across something very cool, called Masonry, though you probably had no idea that's what it was. …Masonry is a jQuery plug-in that let's you create dynamically reorganized content on your …site in a very nifty way. …The best way to understand what Masonry does is to look at these two examples on the Masonry web site. …It shows the content before and after applying Masonry. …What's happening here is we have a page that has a bunch of items, so a regular index page, …but we don't want to list them vertically like you would normally do; we want to list …them horizontally.…
The problem is some of the items are bigger than the others and as a result, they take up more space. …If we use CSS to float these items left to right, what happens is the tallest item in …each row defines the vertical height of that row and nothing can flow in to fill up that space. …So what we end up with is a layout with a lot of dead space in between content. …
- What is responsive design?
- Installing the Anaximander example theme
- Deciding what screen sizes to target
- Designing menus
- Adding responsive images and video
- Using CSS media queries to apply different styles
- Handling sidebars on mobile displays
- Dealing with footer widgets
- Installing jQuery Masonry