Pinterest JQuery Plugins (v5)

Revision 5 of this benchmark created on

Description

Testing pinterest style jquery plugins performance.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.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.1/masonry.pkgd.min.js"></script>
<script src="//crivas.net/prototype/pinterest/js/jquery.freetile.min.js"></script>
<script src="//isotope.metafizzy.co/beta/isotope.pkgd.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 v2
$('#container').isotope({
  itemSelector: '.item'
});
ready

Revisions

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