JSFiddle - React, Tailwind, and code Playground

(jQuery) Arrange divs of varying height on a page / Personal Variation

by Don Schaefer

HTML

<div id="divGalleryContainer">
    <div class="media"></div>
    <div class="media"></div>
    <div class="media"></div>
    <div class="media"></div>
    <div class="media"></div>
    <div class="media"></div>
    <div class="media"></div>
    <div class="media"></div>
    <div class="media"></div>
    <div class="media"></div>    
</div>

CSS

#divGalleryContainer {
    width: 100%;
}
.media {
    width: 150px;
    background-color: #ccc;
    margin: 15px;
    /*float: left;*/
    position: absolute;
}

JavaScript

$(document).ready(function () {
	/////////////////////////// SECTION 1
	
        //Set Random Heights For Testing Purposes
        var divsToDisplay = $('#divGalleryContainer > div').length;
        $('#divGalleryContainer > div').each(function(){
            for(i = 0; i < divsToDisplay; i++){
                var rHeight = Math.floor(Math.random() * (70 - 30 + 1)) + 30;
                $(this).height(rHeight);
            }
        });		
		
		//Initialize variables for placement of divs
		var containerWidth = $('#divGalleryContainer').width();    
		var colWidth;
		var colCount;
		var colHeights = [];
		var divArray = [];
		
		//Console Logging Function for Development Purposes
		function logData(f){ 
			console.group('Collected Data');
				console.log('Function: '+f); //Name of the function that triggered this command
				console.info('containerWidth: '+containerWidth);
				console.info('colWidth: '+colWidth);
				console.info('colCount: '+colCount);
				console.info('colHeights: '+colHeights);
				//console.info('divArray: '+divArray);
				//console.assert(variable > value, 'message'); //Message to display if assertion returns false
			console.groupEnd();
		}
	
	/////////////////////////// SECTION 2
    
		//Find & store relevant properties of all divs
		var divLoop = 1;
		$('.media').each(function(){        
			var div = {
				width: $(this).width(),
				height: $(this).height(),
				margin: parseFloat($(this).css('margin').replace('px',''))
			};
			divArray.push(div);
			console.log("Div"+divLoop+" Height: "+$(this).height());
			divLoop++;
		});   
		
		//Assume all divs have the same width & margin, then store the total width of the first div in a variable we can use for calculating columns
		colWidth = divArray[0].width + divArray[0].margin; 
		
		//Determine # of columns to display based on available screen space
		colCount = Math.floor(containerWidth/colWidth); 
		
		//Ensure there is always at least 1 column being displayed
		if(colCount < 1){colCount...