Skip to content

chenrob/odl-tiles2.1

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 

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