Pinterest JQuery Plugins (v3)

Revision 3 of this benchmark created on

Description

Testing pinterest style jquery plugins performance.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//crivas.net/prototype/pinterest/js/jquery.imagesloaded.js"></script>
<script src="https://raw.github.com/GBKS/Wookmark-jQuery/master/jquery.wookmark.js"></script>
<script src="https://raw.github.com/desandro/masonry/master/jquery.masonry.min.js"></script>
<script src="//crivas.net/prototype/pinterest/js/jquery.freetile.min.js"></script>
<script src="//crivas.net/prototype/pinterest/js/jquery.isotope.min.js"></script>

<div id="container">

        <div class="item"><img src="http://crivas.net/prototype/pinterest/masonry/images/1.jpg"></div>
        <div class="item"><img src="http://crivas.net/prototype/pinterest/masonry/images/2.jpg"></div>
        <div class="item"><img src="http://crivas.net/prototype/pinterest/masonry/images/3.jpg"></div>
        <div class="item"><img src="http://crivas.net/prototype/pinterest/masonry/images/4.jpg"></div>
        <div class="item"><img src="http://crivas.net/prototype/pinterest/masonry/images/5.jpg"></div>
        <div class="item"><img src="http://crivas.net/prototype/pinterest/masonry/images/6.jpg"></div>
        <div class="item"><img src="http://crivas.net/prototype/pinterest/masonry/images/7.jpg"></div>
        <div class="item"><img src="http://crivas.net/prototype/pinterest/masonry/images/8.jpg"></div>
        <div class="item"><img src="http://crivas.net/prototype/pinterest/masonry/images/9.jpg"></div>
        <div class="item"><img src="http://crivas.net/prototype/pinterest/masonry/images/10.jpg"></div>
        <div class="item"><img src="http://crivas.net/prototype/pinterest/masonry/images/11.jpg"></div>
        <div class="item"><img src="http://crivas.net/prototype/pinterest/masonry/images/12.jpg"></div>

 </div>

Test runner

Ready to run.

Testing in
TestOps/sec
WookMark
$('.item').wookmark({
  container: $('#container')
});
ready
Masonry
$('#container').masonry({
  itemSelector: '.item'
});
ready
Freetile
$('#container').freetile({
  selector: '.item'
});
ready
Isotope
$('#container').isotope({
  itemSelector: '.item'
});
ready

Revisions

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