jQuery plugin for building block mosaic

Good day. Perhaps this is not the most useful article, but quite often I came across the fact that the site required building blocks into a “mosaic”, and always invented all sorts of bicycles.

After reading the lesson about creating plugins for jQuery, I decided to try to write this article to solve my problem, see what happened.

First, let's create a jQuery plugin

(function( $ ) { $.fn.mozaika= function() { }; })(jQuery); 

')
As with most plugins, our settings will be. Let's define them:

• Number of columns
• Indentation between blocks
• Field (padding) at the top and bottom of the field with "puzzles"
• Class for blocks
• Class for double width units
• Class for triple-width blocks
• bottom padding cell

We have

 (function( $ ) { $.fn.mozaika= function() { var set = $.extend( { 'n': 4, 'margin': 4, 'padding' : 30, 'item' : 'item', 'citem2' : 'item-w2', 'citem3' : 'item-w3', 'itembot' : 0 }, options); }; })(jQuery); 

Create an array for the height of each column:

 var cols = new Array() //     for(i = 0; i < set.n; i++) cols[i] = 0; 

Find the width of the mosaic element:

 var width = this.width(); //     

The next step is to calculate the width of a single cell (with the usual width):

 var one = (width - set.margin * (set.n - 1))/set.n; //    var left = 0; //    

The next step is to find all the cells and build our puzzle. To do this, you need to check whether our cells are double or triple width cells. If suddenly an element with a double width will be built on the fourth column of four, you need to move it to the first. Also for cases with non-single width, you will need to build a cell at the very bottom of the larger of the columns. So that we find the maximum height from the columns that are affected.

Next we set the coordinates of our cell.

The next step is to write down the new height of our column (columns), and the new coordinates along the x axis. If the line is over, go to a new one. At the end - we set the height of the block for our cells.

 (function( $ ) { $.fn.mozaika= function(options) { var set = $.extend( { 'n': 4, 'margin': 4, 'padding' : 30, 'item' : 'item', 'citem2' : 'item-w2', 'citem3' : 'item-w3', 'itembot' : 0 }, options); var cols = new Array() //     for(i = 0; i < set.n; i++) cols[i] = 0; var width = this.width(); //     var one = (width - set.margin * (set.n - 1))/set.n; //    var left = 0; //    var moz = this.children('.'+set.item); //  i = 0; $(moz).each(function( k, v ) { if($(v).hasClass(set.citem2)){ w = one*2+set.margin; q=2; }else if($(v).hasClass(set.citem3)){ w = one*3+set.margin*2; q=3; }else{ w = one; q = 1; } if(i+q>set.n){ i = 0; } var mx = cols[i]; var mn = i; for(e = i; e <i+q; e++) if(cols[e] > mx){ mx = cols[e]; mn = e; } $(v).css({'position':'absolute', 'width' : w+'px'}); $(v).css({'left' : left+'px', 'top':mx, 'padding-bottom':set.itembot}); $(v).animate({opacity:1},1000); hg = cols[i]; for(e = i; e < i+q; e++){ cols[e] = hg + $(v).height() + set.margin + set.itembot; //console.log('n ' + i + ' q ' + q + ' cols[' + e + '] ' + cols[e]); } left = left + set.margin + w; i = i+q; if(i>=set.n){ i=0; left = 0; } }); mx = cols[0]; for(e = 0; e <set.n; e++) if(cols[e] > mx){ mx = cols[e]; } if(this.height()<(mx+set.padding*2)) this.height(mx+set.padding*2); }; })(jQuery); 

Call:

 $(document).ready(function(e) { $(".catalog").moZaika({ 'n': 4, 'margin': 2, 'item' : 'cat-item', 'citem2' : 'cat-w2', 'citem3' : 'cat-w3', 'itembot' : 20, 'padding' : 0 }); }); 

Done, it works!



The only thing left to fight with is rebuilding when changing the width of the mosaic field. To do this, I still call the plugin in $ (window) .resize () again.