Pinterest JQuery Plugins (v7)

Revision 7 of this benchmark created by Adam Butler on

Description

Testing pinterest style jquery plugins performance.

Preparation HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.wookmark/1.3.1/jquery.wookmark.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/packery/1.1.2/packery.pkgd.min.js"></script>
<script src="//cdn.rawgit.com/yconst/Freetile/master/jquery.freetile.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.0.0/isotope.pkgd.min.js"></script>

<div id="container">
  <div class="item">
    <img src="http://placehold.it/220x220&text=1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
  </div>
  <div class="item">
    <img src="http://placehold.it/220x220&text=2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident</p>
  </div>
  <div class="item">
    <img src="http://placehold.it/220x220&text=3">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in.</p>
  </div>
  <div class="item">
    <img src="http://placehold.it/220x220&text=4">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="item">
    <img src="http://placehold.it/220x220&text=5">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="item">
    <img src="http://placehold.it/220x220&text=6">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="item">
    <img src="http://placehold.it/220x220&text=7">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident.</p>
  </div>
  <div class="item">
    <img src="http://placehold.it/220x220&text=8">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit</p>
  </div>
  <div class="item">
    <img src="http://placehold.it/220x220&text=9">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation</p>
  </div>
  <div class="item">
    <img src="http://placehold.it/220x220&text=10">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
  </div>
  <div class="item">
    <img src="http://placehold.it/220x220&text=11">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa</p>
  </div>
  <div class="item">
    <img src="http://placehold.it/220x220&text=12">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris</p>
  </div>
</div>

Setup

$container = $('#container')
    
    $('.item').css({
      width: "220px"
    });

Test runner

Ready to run.

Testing in
TestOps/sec
WookMark 1.3.1
// async test
$('.item').wookmark({
  container: $container,
  onLayoutChanged: function(){ deferred.resolve() }
});
ready
Masonry 3.1.5
var msnry = new Masonry( $container[0], {
  itemSelector: '.item'
});
 
ready
Freetile 0.3.1
// async test
$container.freetile({
  selector: '.item',
  callback: function(){ deferred.resolve() }
});
ready
Isotope 2.0.0
$container.isotope({
  itemSelector: '.item'
});
ready
Packery 1.1.2
$container.packery({
  itemSelector: '.item',
  columnWidth: 220
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.