Skip to content

chenrob/odl-tiles2.1

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 

Repository files navigation

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

  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>
</section>
  1. 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.

About

Column-centric layout engine for tiles with asymmetric heights

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published