Skip to content
Column-centric layout engine for tiles with asymmetric heights
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Column-centric layout engine for tiles with asymmetric heights.

To keep the readme short, I have written a separate document describing "how" and "why" I implemented this differently from current implementations of Pinterest-style tile layouts.


This has been developed against jQuery 1.7.1 and may possibly be compatible with earlier versions of jQuery.


  1. Create a container block level element
<section class="tiles-container"></section>
  1. Add options (see below) as a data-tileui-options attribute to the container
<section class="tiles-container" data-tileui-options="{"infiniteScroll": true, "minCols": 3}"></section>
  1. Insert "tiles"
<section class="tiles-container" data-tileui-options="{"infiniteScroll": true, "minCols": 3}">
	<div class="tile">content</div>
	<div class="tile">content</div>
  1. Run Javascript
<script type="text/javascript">


  • columnGap (default: 15px)

    Defines the gap between columns

  • maxPages (default: 1)

    Do not fetch more tiles after this number of "pages" of tiles has been shown.

  • minCols (default: 1)

    Minimum number of columns to use.


Initially implemented as a tile-centric layout engine by Lu Wang and fleshed out into a jQuery widget by Teju Prasad.

I later translated the implementation to a jQuery plugin and converted the engine be column-centric. There might still be some more cleanup or tightening up to do.


I am aware I'm not writing this as a proper jQuery plugin (e.g. the init function doesn't return this). This will be fixed over time.

No warranty. Not responsible for any damages or liabilities. Use at your own risk.

You can’t perform that action at this time.