Line break with different image height, Bootstrap

Question

I have a problem in my Grid with line breaking, the images come from a database and are of different heights, some horizontal and other vertical.

I’m wearing the bootstrap.

I have that code

<div class="row">
<div class="col-sm-4 borda_cat">

<a href="produtos/<?php echo $row_categoria2["url"] ?>/<?php echo $row_subcategoria2["url"] ?>/<?php echo $row_produtos["url"] ?>" class="hvr-bubble-top"><img src="uploads/<?php echo $row_fotos_produtos["nome"]?>" class="img-responsive"></a>  

</div>                    
</div>

on the website the images look like this

How would you align the columns being that the heights are different?

Answer 1

You can do thumbnails. You can do "manually" by cutting the images and saving the Thumbs, or you can do "virtual" that would be at runtime, an excellent library to do this is the Smartcrop.

jQuery(document).ready(function($){
    $('.borda_cat').each(function(i, el){
    crop($('img.img-responsive', el).get(0), $(el).width());
  });
});

function crop(image, size) {
  console.log('crop',image);
  var options = {debug: false, width: size, height: size};
  var _img = new Image;

  _img.crossOrigin = 'Anonymous';
  _img.onload = function() {
    window.setTimeout(function() {
      var img = this;
      console.log('start crop');
      smartcrop.crop(img, options, function(result) {

        var crop = result.topCrop;
        var canvas = $('<canvas />')[0];
        var ctx = canvas.getContext('2d');
        canvas.width = options.width;
        canvas.height = options.height;
        ctx.drawImage(img, crop.x, crop.y, crop.width, crop.height, 0, 0, canvas.width, canvas.height);

        $(image).hide().after(canvas);

        console.log('crop end');
      });
    }.bind(this), 100);
  };
  _img.src = image.src;
}