Angular 2 wrapping responsive horizontal gallery - css

Question

I'm trying to implement an horizontal gallery that wraps images based on their dimension.
The effect I would like to achieve is like this:
Is there any way to do this?
EDIT
I'll add something that I tried.
1. I've used angular/flex-layout with the fxLayoutWrap functionality. This wraps images correctly but I've not been able to create an horizontal scrolling gallery. Moreover the images dimension is a bit static and I need a dynamic wrapping:
<div fxFlex="80%" fxLayout="row" fxLayoutWrap>
<div fxFlex="30%" style="background:#ff0000">IMAGE 1</div>
<div fxFlex="45%" style="background:#ff6a00">IMAGE 2</div>
<div fxFlex="25%" style="background:#b200ff">IMAGE 3</div>
<div fxFlex="33%" style="background:#ffd800">IMAGE 4</div>
<div fxFlex="67%" style="background:#ff006e">IMAGE 5</div>
<div fxFlex="50%" style="background:#808080">IMAGE 6</div>
<div fxFlex style="background:#00ff90">IMAGE 7</div>
</div>
2. I tried to use custom css and html. In this case I'm able to build an horizontal scrolling gallery but I'm not able to wrap images dinamically and I have to set width and height manually.
Html code:
<div class="h-scroll-container">
<div class="h-scroll">
<div style="display:inline-block; width:15em; height:100%">
<div class="thumb" style="background-image:url(images/project_1.jpg); width:100%; height:50%;"></div>
<div class="thumb" style="background-image:url(images/project_2.jpg); width:100%; height:50%;"></div>
</div>
<div class="thumb" style="background-image:url(images/project_3.jpg); display:inline-block; width:15em; height:100%;"></div>
<div style="display:inline-block; width:30em; height:100%;">
<div style="width:100%; height:50%;">
<div class="thumb" style="background-image:url(images/project_4.jpg); display:inline-block; width:50%; height:100%;"></div>
<div class="thumb" style="background-image:url(images/project_5.jpg); display:inline-block; width:50%; height:100%;"></div>
</div>
<div class="thumb" style="background-image:url(images/project_6.jpg); display:inline-block; width:100%; height:50%;"></div>
</div>
<div class="thumb" style="background-image:url(images/project_7.jpg); display:inline-block; width:15em; height:100%;"></div>
<div style="display:inline-block; width:30em; height:100%">
<div class="thumb" style="background-image:url(images/project_8.jpg); width:100%; height:50%;"></div>
<div class="thumb" style="background-image:url(images/project_9.jpg); width:50%; height:50%;"></div>
</div>
</div>
</div>
CSS code:
.h-scroll-container {
width: 100%;
height: 100%;
overflow-x: auto!important;
overflow-y: hidden!important;
}
.h-scroll {
height: calc(100% - .5em);
white-space: nowrap;
}
.thumb {
background-position:center;
background-size:cover;
}
3. I'm now trying to adapt this to my case. Here the code:
import { Component, ViewChild, ViewChildren, ElementRef, HostListener, Input, SimpleChanges, QueryList, ChangeDetectorRef, OnChanges, AfterViewInit } from "#angular/core";
import { slideToLeft } from "../../router.animations";
var $: JQueryStatic = require('jquery');
import 'jquery-mousewheel';
require("jquery-mousewheel")($);
require('malihu-custom-scrollbar-plugin')($);
export class Image {
name: string;
path: string;
width: number;
height: number;
galleryImageLoaded: boolean;
srcAfterFocus: string;
}
#Component({
selector: "projects",
template: require("./projects.component.html"),
styles: [require("./projects.component.css")]
})
export class ProjectsComponent implements OnChanges, AfterViewInit {
#Input('flexBorderSize') providedImageMargin: number = 10
#Input('flexImageSize') providedImageSize: number = 10
#ViewChild('galleryContainer') galleryContainer: ElementRef
#ViewChildren('imageElement') imageElements: QueryList<any>
#HostListener('window:scroll', ['$event']) triggerCycle(event) {
this.scaleGallery()
}
#HostListener('window:resize', ['$event']) windowResize(event) {
this.render()
}
private images: Image[] = [];
private gallery: any[] = [];
constructor(private ChangeDetectorRef: ChangeDetectorRef) {
}
ngAfterViewInit() {
this.fetchDataAndRender()
}
public ngOnChanges(changes: SimpleChanges) {
// input params changed
this.render()
}
private fetchDataAndRender() {
var images: Image[] = [
{
name: "project_1.jpg",
path: "images/projects/project_1.jpg",
width: 521,
height: 375,
galleryImageLoaded: false,
srcAfterFocus: ''
},
{
name: "project_2.jpg",
path: "images/projects/project_2.jpg",
width: 534,
height: 375,
galleryImageLoaded: false,
srcAfterFocus: ''
},
{
name: "project_3.jpg",
path: "images/projects/project_3.jpg",
width: 220,
height: 375,
galleryImageLoaded: false,
srcAfterFocus: ''
},
{
name: "project_4.jpg",
path: "images/projects/project_4.jpg",
width: 443,
height: 375,
galleryImageLoaded: false,
srcAfterFocus: ''
},
{
name: "project_5.jpg",
path: "images/projects/project_5.jpg",
width: 374,
height: 375,
galleryImageLoaded: false,
srcAfterFocus: ''
},
{
name: "project_6.jpg",
path: "images/projects/project_6.jpg",
width: 1052,
height: 375,
galleryImageLoaded: false,
srcAfterFocus: ''
},
{
name: "project_7.jpg",
path: "images/projects/project_7.jpg",
width: 235,
height: 375,
galleryImageLoaded: false,
srcAfterFocus: ''
},
{
name: "project_8.jpg",
path: "images/projects/project_8.jpg",
width: 570,
height: 375,
galleryImageLoaded: false,
srcAfterFocus: ''
},
{
name: "project_9.jpg",
path: "images/projects/project_9.jpg",
width: 328,
height: 375,
galleryImageLoaded: false,
srcAfterFocus: ''
},
{
name: "project_10.jpg",
path: "images/projects/project_10.jpg",
width: 521,
height: 375,
galleryImageLoaded: false,
srcAfterFocus: ''
},
{
name: "project_11.jpg",
path: "images/projects/project_11.jpg",
width: 534,
height: 375,
galleryImageLoaded: false,
srcAfterFocus: ''
},
{
name: "project_12.jpg",
path: "images/projects/project_12.jpg",
width: 220,
height: 375,
galleryImageLoaded: false,
srcAfterFocus: ''
},
{
name: "project_13.jpg",
path: "images/projects/project_13.jpg",
width: 235,
height: 375,
galleryImageLoaded: false,
srcAfterFocus: ''
},
{
name: "project_14.jpg",
path: "images/projects/project_14.jpg",
width: 570,
height: 375,
galleryImageLoaded: false,
srcAfterFocus: ''
},
]
this.images = images;
//this.ImageService.updateImages(this.images)
// twice, single leads to different strange browser behaviour
this.render();
this.render();
}
private render() {
this.gallery = []
let tempRow = [this.images[0]]
let rowIndex = 0
let i = 0
for (i; i < this.images.length; i++) {
while (this.images[i + 1] && this.shouldAddCandidate(tempRow, this.images[i + 1])) {
i++
}
if (this.images[i + 1]) {
tempRow.pop()
}
this.gallery[rowIndex++] = tempRow
tempRow = [this.images[i + 1]]
}
this.scaleGallery()
}
private shouldAddCandidate(imgRow: Image[], candidate: Image): boolean {
let oldDifference = this.calcIdealHeight() - this.calcRowHeight(imgRow)
imgRow.push(candidate)
let newDifference = this.calcIdealHeight() - this.calcRowHeight(imgRow)
return Math.abs(oldDifference) > Math.abs(newDifference) || (this.getGalleryWidth() + 1000) > this.calcOriginalRowWidth(imgRow)
}
private calcRowHeight(imgRow: Image[]) {
let originalRowWidth = this.calcOriginalRowWidth(imgRow)
let ratio = (this.getGalleryWidth() - (imgRow.length - 1) * this.calcImageMargin()) / originalRowWidth
let rowHeight = imgRow[0].height * ratio
return rowHeight
}
private calcImageMargin() {
let galleryWidth = this.getGalleryWidth()
let ratio = galleryWidth / 1920
return Math.round(Math.max(1, this.providedImageMargin * ratio))
}
private calcOriginalRowWidth(imgRow: Image[]) {
let originalRowWidth = 0
imgRow.forEach((img) => {
let individualRatio = this.calcIdealHeight() / img.height
img.width = img.width * individualRatio
img.height = this.calcIdealHeight()
originalRowWidth += img.width
})
return originalRowWidth
}
private calcIdealHeight() {
return this.getGalleryWidth() / (80 / this.providedImageSize) + 100
}
private getGalleryWidth() {
if (this.galleryContainer.nativeElement.clientWidth === 0) {
// IE11
return this.galleryContainer.nativeElement.scrollWidth
}
return this.galleryContainer.nativeElement.clientWidth
}
private scaleGallery() {
let imageCounter = 0
let maximumGalleryImageHeight = 0
this.gallery.forEach((imgRow: Image[]) => {
let originalRowWidth = this.calcOriginalRowWidth(imgRow)
if (imgRow !== this.gallery[this.gallery.length - 1]) {
let ratio = (this.getGalleryWidth() - (imgRow.length - 1) * this.calcImageMargin()) / originalRowWidth
imgRow.forEach((img) => {
img.width = img.width * ratio
img.height = img.height * ratio
maximumGalleryImageHeight = Math.max(maximumGalleryImageHeight, img.height)
this.checkForAsyncLoading(img, imageCounter++)
})
}
else {
imgRow.forEach((img) => {
img.width = img.width
img.height = img.height
maximumGalleryImageHeight = Math.max(maximumGalleryImageHeight, img.height)
this.checkForAsyncLoading(img, imageCounter++)
})
}
})
//if (maximumGalleryImageHeight > 375) {
// this.minimalQualityCategory = 'preview_xs'
//} else {
// this.minimalQualityCategory = 'preview_xxs'
//}
this.ChangeDetectorRef.detectChanges()
}
private checkForAsyncLoading(image: Image, imageCounter: number) {
let imageElements = this.imageElements.toArray()
if (image.galleryImageLoaded ||
(imageElements.length > 0 && this.isScrolledIntoView(imageElements[imageCounter].nativeElement))) {
image.galleryImageLoaded = true
image.srcAfterFocus = image.path
}
else {
image.srcAfterFocus = ''
}
}
private isScrolledIntoView(element) {
let elementTop = element.getBoundingClientRect().top
let elementBottom = element.getBoundingClientRect().bottom
return elementTop < window.innerHeight && elementBottom >= 0 && (elementBottom > 0 || elementTop > 0)
}
}
I've quite achieved my objective but I have to set manually the width check inside shouldAddCandidate method and rows are not of the same height. Some suggestions to make this more dynamic ad responsive?