Skip to content

A collection of deterministic image layout algorithms written in pure javascript.

License

Notifications You must be signed in to change notification settings

naturalatlas/image-layout

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

image-layout

NPM version

A collection of deterministic image layout algorithms written in pure javascript that work just as well on a server as in a browser. None of them are tied to the DOM in any way.

$ npm install image-layout --save

Sample Usage

var layout = require('image-layout/layouts/fixed-partition');
var elements = [
	{width: 400, height: 300},
	{width: 200, height: 100}
];

var result = layout(elements);
// container_width = result.width
// container_height = result.height
for (var i = 0, n = elements.length; i < n; i++) {
	// result.positions[i].x
	// result.positions[i].y
	// result.positions[i].width
	// result.positions[i].height
}

Layouts

fixed-columns

Simply balances photos into multiple columns.

var layout = require('image-layout/layouts/fixed-columns');
var result = layout(elements, {
    containerWidth: 800,
    columnCount: 3,
    spacing: 0
});

fixed-partition

Uses a partitioning scheme outlined by Johannes Treitz in "The algorithm for a perfectly balanced photo gallery". It's not the most-efficient option, but it leaves no ragged edges.

var layout = require('image-layout/layouts/fixed-partition');
var result = layout(elements, {
    align: 'center', // optional
    containerWidth: 800,
    idealElementHeight: 300,
    spacing: 0
});

single

Constrains a single image to a given area.

var layout = require('image-layout/layouts/single');
var result = layout(elements, {
    align: 'center', // optional
    containerWidth: 800,
    maxHeight: 800
});

License

Copyright © 2015 Natural Atlas, Inc. & Contributors

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at: http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

About

A collection of deterministic image layout algorithms written in pure javascript.

Resources

License

Stars

Watchers

Forks

Packages

No packages published