"Great leveler" or a way to solve the problem of leveling

We do a lot of e-commerce and often meet the challenge of leveling the elements. At first glance, everything is simple, several lines are written in the code and everything is ok. But in fact, the elements are very different, there are too many rules of application, and there is still adaptive.

This article is useful to those who often encounter the problem of alignment of elements in height in different situations.

Fig. 1. The order of display groups of goods.

The standard elements of the product card are the product photo, name, price, “buy” button. But additional fields often appear, for example: "rating", "reviews", "not for sale", "promotions / discounts", "old / new price", description of goods and others that may affect the standard height of the product card, and since the size and content of the content of these elements varies for each product individually (for example, there is an old price on some product, there is no other price on the other or the name is in a few lines), not only the whole series takes an incorrect form, but also affects the display of subsequent items.
')
Fig. 2. Incorrect display when adding items, or changing their heights.


The option with a fixed card size is not very suitable, since:

1. 90% of my work is responsive sites (minimum fixed sizes, in this case, the height of the item card should not be fixed).
2. It is impossible to calculate the optimal height to fit all options.

You can take a breakdown by the Grid system - one row of four products (an example with simplified semantics):

<row> <col> <col> <col> <col> </row> 

But then there are difficulties with processing and displaying goods on the server side (it is necessary to complicate the selection with cycles and conditions), especially if products are selected from different categories - then we have a new category that will start with a new series, and we need to bring all the goods in a row.

Ideally, we need the following structure:

 <div class="wrapper"> <div class="product-card">...</div> <div class="product-card">...</div> <div class="product-card">...</div> <div class="product-card">...</div> ……… <div class="product-card">...</div> </div> 

And so that everything looks smooth and beautiful.

This is where the idea to write a small function visited me. I met some ready-made solutions, but they either had problems or a very limited scope. I had to write my “bicycle”.

So! Let's move closer to the technical part of the article:

1. The function is written using the jQuery library, optionally easily rewritten to native js.
2. It is easy to understand and add (if necessary) something of your own.
3. The most important! - she does her job!

The DOM tree structure is used as in the example above:

  <div class="wrapper"> <div class="product-card">...</div> <div class="product-card">...</div> <div class="product-card">...</div> <div class="product-card">...</div> ……… <div class="product-card">...</div> </div> 

The principle of operation is as follows:

1. Recognize the width of the product card “product-card”;
2. We recognize the width of the parent wrapper "wrapper";
3. We make the calculation - how many cards will fit the width of the wrapper (rounding down) so we get a simulated series;
4. Further cycles come into operation:
   a) How many and what elements need to be equalized in height in one card;
   b) Compares these heights in each card of the simulated series, and finds the highest value of the height of the compared elements;
   c) Assigns the appropriate heights to all elements that fall into the comparison area.

The script itself is listed below (the numbers from the list of the principle of operation are marked with numbers):

  function GreatBalancer(block){ var wrapWidth = $(block).parent().width(), // 1 blockWidth = $(block).width(), // 2 wrapDivide = Math.floor(wrapWidth / blockWidth), // 3 cellArr = $(block); for(var arg = 1;arg<=arguments.length;arg++) { // 4.1 for (var i = 0; i <= cellArr.length; i = i + wrapDivide) { var maxHeight = 0, heightArr = []; for (j = 0; j < wrapDivide; j++) { // 4.2 heightArr.push($(cellArr[i + j]).find(arguments[arg])); if (heightArr[j].outerHeight() > maxHeight) { maxHeight = heightArr[j].outerHeight(); } } for (var counter = 0; counter < heightArr.length; counter++) { // 4.3 $(cellArr[i + counter]).find(arguments[arg]).outerHeight(maxHeight); } } } } 

and his challenge:

 GreatBalancer(".product-card",".product-title",".price-min",".product-image"); 

Note! The first argument, you must specify the item card. Further, in any order, the list of those elements that need to be equalized, the function can accept and process any number of elements!

Here is an example of a screenshot, which clearly shows that, due to the difference in the heights of the elements (the title of the product has a different number of lines, and the first price appeared in the first product), the first row looks incorrect, and the second row has shifted.

Fig. 3. An example of displaying a group of products without alignment.


And the following image clearly shows how the ratio of the heights of the elements has changed:

Fig. 4. An example of the result of the script.


I would be glad if this article came in favor of someone! All success, interesting projects and custom solutions!

Ps . Our school will soon start courses on Front end from the author of the article “How to quickly start programming in Node.js” , “HTML5, CSS3 and JavaScript, what is it and what does it eat?” And “JavaScript programming courses” . To enroll write to info@digitov.com

PPS To receive our new articles before others or simply not to miss new publications - subscribe to us on Facebook , VK and Twitter .

Author:
Stanislav Zakorko, Senior JavaScript Developer, SECL Group