Grids with dynamically generated number of columns

This is a jQuery plugin that makes part of the Premise WP JS Library – a library of functions and plugins that extend Premise WP’s functionality. This plugin takes an element with many children and creates a column grid of all the children. It optimizes the number of rows used while trying to set equal number of columns per row.

How do I use it?

Lets say I have a container #my_container which has a lot of children elements, here’s how I would use the plugin..

$( '#my_container' ).premiseDynamicColumns();

Options

Options are passed as an object..

$( '#my_container' ).premiseDynamicColumns({
	grid: 'inline'
});
options currently supported

gird: row|inline  Default row – whether to use premise-row or premise-inline for the grid. Learn more about the difference between premise-row and premise-inline.

Cool, but when do I need this?

This comes in very handy when you have a container with many children and the number of children in that container may change. As is the scenario in the demo that we have right below – When you click on the button below a random number of children elements (between 50 – 100) will be inserted right below the button. Then our plugin organizes them in a grid for us. Every time you click the button the operation repeats itself. Try it out!

Here is the code that powers our demo.

<div class="premise-align-center">
	<a href="#reset-dynamic-grid" id="reset-dynamic-grid" class="pwps-btn-secondary pwps-btn-lg" title="This will randomly set the number of columns">See it in Action!</a>
	<br>
	<br>
	<span id="number-of-children"><!-- our JS will add the count --></span>
	<br>
	<br>
	<div id="holds-dynamic-grid">
		<!-- our JS will add the random elements -->
	</div>
</div>

<script type="text/javascript">
(function($){
	$(document).ready(function(){
		// Bind our button
		$( '#reset-dynamic-grid' ).click(createDynamicGrid);
		// reset our grid
		function createDynamicGrid() {
			// get random number between 50 and 100
			var rand = Math.floor(Math.random() * (100 - 50 + 1) + 50);
			// clear our container
			$( '#holds-dynamic-grid' ).html('');
			// output the number of children that will be created
			$( '#number-of-children' ).html( 'Total children: '+rand );
			for (var i = rand - 1; i >= 0; i--) {
				$( '#holds-dynamic-grid' ).append( '<div><div class="premise-aspect-ratio-4-3" style="background-color:#4677bb;margin-bottom: 20px;"></div></div>' );
			}
			// call our plugin on the container
			$( '#holds-dynamic-grid' ).premiseDynamicColumns();
			return false;
		}
	});
}(jQuery));
</script>

Send us your comments..

Your email address will not be published. Required fields are marked *