75 lines
2.7 KiB
JavaScript
75 lines
2.7 KiB
JavaScript
// Justified photo grid layout (Google Photos style)
|
|
// Inspired by https://github.com/flickr/justified-layout
|
|
(function () {
|
|
const SPACING = 3;
|
|
const PADDING = 3;
|
|
|
|
function applyLayout() {
|
|
const container = document.getElementById('lightgallery');
|
|
if (!container) return;
|
|
|
|
const items = [...container.querySelectorAll('.photo-item')];
|
|
if (!items.length) return;
|
|
|
|
const containerWidth = container.offsetWidth - PADDING * 2;
|
|
const TARGET_HEIGHT = Math.min(220, Math.floor(containerWidth * 0.4));
|
|
const ratios = items.map(a => {
|
|
const w = parseInt(a.dataset.width) || 1;
|
|
const h = parseInt(a.dataset.height) || 1;
|
|
return w / h;
|
|
});
|
|
|
|
// Group items into rows
|
|
const rows = [];
|
|
let rowStart = 0;
|
|
while (rowStart < ratios.length) {
|
|
let sum = 0;
|
|
let end = rowStart;
|
|
while (end < ratios.length) {
|
|
sum += ratios[end];
|
|
const rowWidth = sum * TARGET_HEIGHT + SPACING * (end - rowStart);
|
|
end++;
|
|
if (rowWidth >= containerWidth) break;
|
|
}
|
|
rows.push({ start: rowStart, end });
|
|
rowStart = end;
|
|
}
|
|
|
|
// Position each item
|
|
let top = PADDING;
|
|
rows.forEach(({ start, end }, rowIndex) => {
|
|
const isLastRow = rowIndex === rows.length - 1;
|
|
const count = end - start;
|
|
const sumRatios = ratios.slice(start, end).reduce((a, b) => a + b, 0);
|
|
const totalSpacing = SPACING * (count - 1);
|
|
|
|
// Don't stretch the last row if it's not full
|
|
const rowHeight = isLastRow && count < 3
|
|
? TARGET_HEIGHT
|
|
: (containerWidth - totalSpacing) / sumRatios;
|
|
|
|
let left = PADDING;
|
|
for (let i = start; i < end; i++) {
|
|
const width = Math.round(ratios[i] * rowHeight);
|
|
const height = Math.round(rowHeight);
|
|
const item = items[i];
|
|
item.style.top = top + 'px';
|
|
item.style.left = left + 'px';
|
|
item.style.width = width + 'px';
|
|
item.style.height = height + 'px';
|
|
left += width + SPACING;
|
|
}
|
|
top += Math.round(rowHeight) + SPACING;
|
|
});
|
|
|
|
container.style.height = (top - SPACING + PADDING) + 'px';
|
|
items.forEach(item => {
|
|
item.style.visibility = 'visible';
|
|
const img = item.querySelector('img[data-lazy]');
|
|
if (img) img.src = img.dataset.lazy;
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', applyLayout);
|
|
window.addEventListener('resize', applyLayout);
|
|
})();
|