How to "fill" the screen with thumbnails, but not more rows...

[Offerel]

To have the gallery load fast, I send currently only x amount of images to the gallery via php. If the user reaches the bottom, I send a xhttp request for the next batch of images and so on. This works fine so far, as long there is a scrollbar where the user can scroll to the bottom. Its identical to https://miromannino.github.io/Justified-Gallery/endless-scroll/

But when a user has a really big monitor, the defined initial image count is to small to fill the screen with thumbnails, the scrollbar is not available and the user can't scroll to trigger the xhttp request.

How can I load so much pictures, that it fills the screen, but not more. Enough to make the scrollbar available, to trigger the xhttp request?

[Offerel]

It seems, i have found a way, to at workaround what i want:

$('#images').justifiedGallery().on('jg.complete', function(e) {
	if(e.currentTarget.clientHeight > 100 && e.currentTarget.clientHeight < document.documentElement.clientWidth) {
		// load next batch of images
	}
});

There is a jg.complete event. It fires, when the gallery is completed. Now i check the height of the computed gallery and compare it to the available viewport. If it gallery height is lower as the viewport, the scrollbars are missing. At this point, i load the next x photos from the backend. Additionally, I added a 100 pixel "grace" height, which is used when a gallery has zero photos, in that case, it doesn't make sense to load the next photos.

Maybe this is helpful for others, with the same issue.