• This repository has been archived on 06/May/2020
  • Stars
    star
    130
  • Rank 277,575 (Top 6 %)
  • Language
    JavaScript
  • Created over 11 years ago
  • Updated almost 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Horizontal grid packing

Horizontal grid packing

Packs grids into rows so that each row expands to the full container width. Row heights are dynamically adjusted. Similar to Masonry, but the space taken by all the grids will always be a rectangle without any jagged edges. By being horizontal, users view the grid linearly (scan left to right, top to bottom) kind of like a comic book.

Demo: http://jonathanong.github.io/horizontal-grid-packing/

See:

Install

If you use component, the dependencies are handled for you. If you use bower, the dependencies are packaged together.

component install jonathanong/horizontal-grid-packing
bower install horizontal-grid-packing

API

Layout

The HTML must strictly be a single container whose children are strictly grid elements.

<div>
  <img data-width="100" data-height="320">
  <div data-aspect-ratio=".55"></div>
  <element></element>
  <element></element>
</div>

This library assumes you know the aspect ratio of each grid element. Each element should either have a data-aspect-ratio attribute (width/height) or both data-width and data-height attributes. If you do not know these attributes, use a library such as imagesloaded to calculate the dimensions before using this library. This library will not attempt to figure out the dimensions of each grid element.

Pack(container [, options])

Returns a new instance of Pack.

var pack = new HorizontalGridPacking(container, options)

new is optional. container is the element that contains all the grids. The options are:

  • height - Target row height in pixels. 120 by default.
  • padding - Padding between each grid in pixels. 0 by default.

Each of these options can be changed as an attribute of pack:

// Change the target height
pack.height = Math.round(window.outerHeight / 5)
// Change the padding
pack.padding = 5
// Recalculate the grid
pack.reload()

Other options you may be interested are:

  • width - the width of the grid in pixels. You should change this when container's width changes.

pack.reload()

Recalculates the grid. Specifically, you would want to use this when container is resized:

window.addEventListener('resize', function () {
  pack.width = container.clientWidth
  pack.height = Math.round(window.outerHeight / Math.PI)
  pack.reload()
})

pack.destroy()

Destroys the grid and returns container to its original state.

pack.create()

Creates the grid. This is called by default. You should only use this if the grid has been previously destroyed.

pack.append(DocumentFragment || elements)

Append elements to the current grid. Could either be a DocumentFragment instance whose child nodes are elements, or an array-like variable of grid elements. Appends using DocumentFragment, so don't worry about reflows.

Compatibility

IE9+ (Pull requests welcome for IE8)

License

The MIT License (MIT)

Copyright (c) 2013 Jonathan Ong [email protected]

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

More Repositories

1

heroku-buildpack-ffmpeg-latest

A Heroku buildpack for ffmpeg that always downloads the latest static build
Shell
360
star
2

osx-webdev-setup

The perfect web development OS X setup
213
star
3

git-style-guide

Personal guide for using git with GitHub
74
star
4

style-guide

My style guide
64
star
5

ee-first

return the first event in a set of ee/event pairs
JavaScript
54
star
6

server-style-guide

Style guide for writing JS web servers
35
star
7

async-control-flow

Workshop on Asynchronous Control Flow
JavaScript
28
star
8

baaar

a colorful top loading progress bar
JavaScript
24
star
9

js-style-guide

My style guide for JS
22
star
10

ci-workshop

My workshop on CI
21
star
11

autocomplete

mobile-first autocomplete
JavaScript
17
star
12

pipe

Streaming and async template rendering for node.js using template strings
JavaScript
13
star
13

babel-nodepack

A babel bundler for node.js
JavaScript
10
star
14

react-asset-loader

React Asset Loader
JavaScript
10
star
15

fn-getter

Simple, lazyily evaluated values
JavaScript
9
star
16

ims

A basic Image Management System for managing your assets
JavaScript
9
star
17

module-style-guide

Style guide for writing JS modules
8
star
18

lazyrequire

lazily require modules in node.js
JavaScript
7
star
19

gh-automerge

Deprecated: superseded by native auto-merge and https://github.com/jonathanong/dependabot-automerge
JavaScript
7
star
20

component-style-guide

Style guide for authoring (web) components
7
star
21

memorizer

memoize a getter of an object
JavaScript
6
star
22

lru-cache-decorator

lru-cache as a decorator function
JavaScript
5
star
23

bulk-insert

A writable stream that batches
JavaScript
5
star
24

no-naughty-words

Censor bad words
JavaScript
5
star
25

textcomplete

textcomplete
JavaScript
5
star
26

s3-set-headers

Update headers on all objects in a bucket
JavaScript
5
star
27

npm-pin-dependencies

Pin all your npm dependencies
JavaScript
5
star
28

redis-cache-fn

cache a function via redis
JavaScript
5
star
29

path-is

check what type of path a string is
JavaScript
4
star
30

asymmetrical-signing

Asymmetrically sign any data
JavaScript
4
star
31

rpit

[DEPRECATED] personal repository initialization thing, will be replaced by something better!
JavaScript
4
star
32

passwords

Password creation and management with native scrypt and haveibeenpwned
JavaScript
4
star
33

github-actions-workflow-templates

Templates for GitHub Actions
JavaScript
4
star
34

fn-key-cache

JavaScript
3
star
35

spdy-keys

SSL keys for development use
JavaScript
3
star
36

file-is

Check the type of a file or buffer by inspecting its contents
JavaScript
3
star
37

load-script

Script loader with promise & requestIdleCallback support
JavaScript
3
star
38

json-check

JSON file checker
JavaScript
2
star
39

dependabot-automerge

JavaScript
2
star
40

delegated-dropdown

mobile-first delegated dropdown menus with smart positioning
JavaScript
2
star
41

redis-cache-decorator

DEPRECATED
JavaScript
2
star
42

redshift-loader

JavaScript
2
star
43

crappy-recruiters

A list of spammy recruiters in the Los Angeles area
2
star
44

greenkeeper-enable-organization

Enable greenkeeper on all of an organization's repositories
JavaScript
1
star
45

identify

Image identification service with Vips via Sharp support falling back to ImageMagick
JavaScript
1
star
46

disallow

Disallow certain types of files
JavaScript
1
star
47

ci-reference-app

JavaScript
1
star
48

async-local-storage-read-replica

JavaScript
1
star
49

jonathanong

1
star
50

ci-reference-app-2

JavaScript
1
star