image-layout
v0.4.1
Published
A collection of deterministic image layout algorithms written in pure javascript.
Downloads
4,659
Maintainers
Readme
image-layout
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.