odl-tiles2.1
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.
Requirements
This has been developed against jQuery 1.7.1 and may possibly be compatible with earlier versions of jQuery.
Usage
- Create a container block level element
<section class="tiles-container"></section>
- 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>
- Insert "tiles"
<section class="tiles-container" data-tileui-options="{"infiniteScroll": true, "minCols": 3}">
<div class="tile">content</div>
<div class="tile">content</div>
</section>
- Run Javascript
<script type="text/javascript">
$('.tiles-container').tileUI();
</script>
Options
-
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.
History
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.
Disclaimer
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.