Skip to content

remove maxRowImgs option #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
reilldesign wants to merge 2 commits into
base: main
Choose a base branch
from
Open

remove maxRowImgs option #5

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eb8bda7
remove maxRowImgs option
reilldesign Mar 28, 2025
749e5eb
add classe to last image of a row and a column
reilldesign May 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 13 additions & 12 deletions imgjust.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
class ImgJust {
idealHeight = 150
maxRowImgs = 16
rowGap = 0
columnGap = 0
paddingLeft = 0
Expand Down Expand Up @@ -28,7 +27,7 @@ class ImgJust {
var badness = new Map();
var start = new Map();
var totalWidth = -this.columnGap;
for (var end = 0; end < imgs.length && end < this.maxRowImgs; end++) {
for (var end = 0; end < imgs.length; end++) {
totalWidth += idealImgWidths[end] + this.columnGap;
const dif = totalWidth - containerWidth;
badness.set(end, dif * dif);
Expand All @@ -43,8 +42,8 @@ class ImgJust {
start = new Map();

// for each possible terminating image
for (var end = row; end < imgs.length && end < row + this.maxRowImgs; end++) {
for (var end = row; end < imgs.length; end++) {

// compute best starting image
totalWidth = idealImgWidths[end];
const dif = totalWidth - containerWidth;
Expand All @@ -67,9 +66,7 @@ class ImgJust {
}

// Find best terminating row
var row = rowBadness.length - this.maxRowImgs;
if (row < 0)
row = 0;
var row = 0;
var bestLastRow = row;
var minBad = rowBadness[row].get(imgs.length - 1);
for (row++; row < rowBadness.length; row++) {
Expand All @@ -79,7 +76,7 @@ class ImgJust {
bestLastRow = row;
}
}

// Assign start and stop index to each row
var rowRanges = [];
var prevRowStart = imgs.length;
Expand All @@ -97,7 +94,7 @@ class ImgJust {
totalImgWidth += idealImgWidths[i];
imgs[i].style.marginBottom = this.rowGap + "px";
}
const containerWidthSpace = containerWidth - (range.end - range.start)*this.columnGap;
const containerWidthSpace = containerWidth - (range.end - range.start) * this.columnGap;
const newHeight = Math.round(this.idealHeight * containerWidthSpace / totalImgWidth);
var newRowWidth = 0;
for (var i = range.start; i < range.end; i++) {
Expand All @@ -110,22 +107,26 @@ class ImgJust {
imgs[range.end].style.width = containerWidth - newRowWidth + "px";
imgs[range.end].style.height = newHeight + "px";
imgs[range.end].style.marginRight = "0";
imgs[range.end].classList.add("end");
}
const lastRange = rowRanges[rowRanges.length - 1];
for (var i = lastRange.start; i <= lastRange.end; i++)
imgs[i].style.marginBottom = "0";
imgs[i].style.marginBottom = "0",
imgs[i].classList.add("last");

// All done. Now make visible.
for (const img of imgs)
img.style.display = "block";
}

addImages(imgs) {
for (const img of imgs) {
img.style.display = "none";
this.imgs.push(img);
}
}
constructor(container, imgs=[], options={}) {

constructor(container, imgs = [], options = {}) {
for (var [key, val] of Object.entries(options))
this[key] = val;
if (!container)
Expand All @@ -147,4 +148,4 @@ class ImgJust {

addEventListener("resize", _ => this.reload());
}
}
}