Book Image

jQuery for Designers Beginner's Guide Second Edition

By : Natalie Maclees
Book Image

jQuery for Designers Beginner's Guide Second Edition

By: Natalie Maclees

Overview of this book

Table of Contents (21 chapters)
jQuery for Designers Beginner's Guide Second Edition
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
Index

Creating a tiled layout


In a tiled layout, or a masonry layout, HTML elements are fit together like bricks in a wall rather than the strict grid layouts we can create with just CSS. With CSS, we're limited to layouts as shown in the following figure:

This is a perfectly acceptable way to lay out our content; our site visitors can view all of the content without a problem. However, if we add JavaScript to the mix, we can improve those layouts a bit by making them fit together as shown in the following figure:

Tiled layouts or masonry layouts can help to close up gaps left by items of different heights. Tiled layouts are great for situations where our site visitors are browsing through lots of graphical content—such as a photo gallery. They're less ideal for situations where site visitors might be looking for something specific or where the content is less graphical—such as a list of search results.

To accomplish our tiled layout, we'll be using the excellent Masonry library by David DeSandro...