jQuery Equal Heights by row example

Equal Heights - Basic usage

HTML


<div class="example">
  <div class="example-item"> ... </div>
  <div class="example-item"> ... </div>
  <div class="example-item"> ... </div>
  <div class="example-item"> ... </div>
  <div class="example-item"> ... </div>
  <div class="example-item"> ... </div>
</div>

JavaScript


$(".example-item").equalHeights();

Equal Heights by row

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident maiores, impedit voluptatibus voluptatem numquam, ad suscipit reprehenderit eligendi officiis quidem voluptatum illo ipsum tempora eveniet asperiores natus, vitae debitis aspernatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium voluptates, labore neque necessitatibus harum possimus, eveniet deleniti adipisci cum ipsa, ut error! Eum voluptatibus culpa consequatur praesentium reprehenderit voluptas eos!

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore molestiae voluptatibus rem, rerum vero placeat ratione explicabo esse sint nulla odit iste tempora magni distinctio, voluptate ipsum quasi ducimus aut? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis distinctio laborum, tempore rem officia cupiditate modi, velit, explicabo cumque voluptatem quod vel. Labore hic obcaecati!

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quos repudiandae possimus voluptates, deserunt laudantium amet est et quisquam perspiciatis, at eius exercitationem minima ab ducimus vero sapiente, sequi odio! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, quo! Dicta doloribus, aperiam deserunt labore, fuga, blanditiis placeat delectus fugiat reprehenderit magni et. Sint, ex assumenda non impedit veritatis. Aspernatur!

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque error est magni totam, enim perferendis sint delectus ipsam blanditiis adipisci consequatur nesciunt dolorum eos, molestiae id cum. Explicabo, maxime, ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, totam, illo id obcaecati unde suscipit sit, harum labore, blanditiis quasi beatae. Suscipit impedit dolore praesentium harum natus mollitia, eligendi, dolorum.

Lorem ipsum dolor sit amet

Lorem

Equal Heights - Parent and inner item options

HTML


<div class="example-2">
  <div class="row">
    <div class="col-sm-6 col-md-6">
      <div class="example-item-2"> ... </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="example-item-2"> ... </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="example-item-2"> ... </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="example-item-2"> ... </div>
    </div>
  </div>
</div>

JavaScript


$(".example-item-2").equalHeights({
  innerItem: ".example-item__content",
  parent: $(".example-2")
});

P.S. You can use this script when the items have different widths.

Lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique cumque vel aliquid quo adipisci, animi, dolorum aliquam sapiente nisi unde! Alias corporis velit hic quisquam sed, repellat reiciendis magnam labore.

Aspernatur, perferendis optio fugiat nulla sed facere ut maxime corrupti fuga unde laboriosam iste quod! Perferendis veniam, ea ratione accusantium aut cupiditate quisquam fugiat ad id. Ipsam sit pariatur mollitia!

Lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia odit maxime blanditiis tenetur voluptas necessitatibus cumque ducimus dolorum itaque ratione corrupti iusto saepe, repellat nesciunt nemo, dolore, placeat fugit impedit!

Optio quasi nesciunt animi id velit molestiae voluptate quas ad pariatur odio amet fugit, obcaecati dignissimos odit. Fuga pariatur praesentium, fugiat voluptatum autem nihil, voluptatibus, quos soluta, illum non minima.

Lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi amet numquam fugit voluptatibus, provident, fuga at ratione minima rem commodi corporis ea, quibusdam blanditiis libero voluptate. Tempora maxime, doloribus culpa.

Lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores sunt, itaque deleniti incidunt labore inventore, nemo atque eius ex sapiente, vero aspernatur maxime eum sit recusandae debitis dolore ullam voluptatum?

Amet at excepturi, illum a, sit aliquam. Eaque corporis illo omnis.

Lorem

Equal Heights - Disable by row option

HTML


<div class="example-3">
  <div class="example-item-3"> ... </div>
  <div class="example-item-3"> ... </div>
  <div class="example-item-3"> ... </div>
  <div class="example-item-3"> ... </div>
  <div class="example-item-3"> ... </div>
  <div class="example-item-3"> ... </div>
</div>

JavaScript


$(".example-item-3").equalHeights({
  byRow: false
});

All items have equal height

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet

Equal Heights - Auto Initialize

HTML


<div class="example-4" data-equalheights=".example-item-4">
  <div class="example-item-4"> ... </div>
  <div class="example-item-4"> ... </div>
  <div class="example-item-4"> ... </div>
  <div class="example-item-4"> ... </div>
  <div class="example-item-4"> ... </div>
  <div class="example-item-4"> ... </div>
</div>

Lorem ipsum dolor sit amet

Equal Heights - Items with images

HTML


<div class="example-5">
  <div class="example-item-5"> ... </div>
  <div class="example-item-5"> ... </div>
  <div class="example-item-5"> ... </div>
  <div class="example-item-5"> ... </div>
  <div class="example-item-5"> ... </div>
  <div class="example-item-5"> ... </div>
</div>

JavaScript


$(".example-item-5").equalHeights().find("img, iframe, object").load(function(){
  $(".example-item-5").equalHeights();
});

P.S. or use fixed height for image wrapper.