Pinterest JQuery Plugins (v8)

Revision 8 of this benchmark created by hongkhanh on

Description

Testing pinterest style jquery plugins performance.

Preparation HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>

<script src="//cdn.rawgit.com/hongkhanh/benchmark/master/gridify-benchmark/libs/jquery.wookmark.min.js"></script>
<script src="//cdn.rawgit.com/hongkhanh/benchmark/master/gridify-benchmark/libs/masonry.pkgd.min.js"></script>
<script src="//cdn.rawgit.com/hongkhanh/benchmark/master/gridify-benchmark/libs/isotope.pkgd.min.js"></script>

<script src="//cdn.rawgit.com/hongkhanh/benchmark/master/gridify-benchmark/libs/gridify.min.js"></script>
<script src="//cdn.rawgit.com/hongkhanh/benchmark/master/gridify-benchmark/libs/jquery.gridify.min.js"></script>
<script src="//cdn.rawgit.com/hongkhanh/benchmark/master/gridify-benchmark/libs/yui.gridify.min.js"></script>

<div id="container">
    <img src="http://st.houzz.com/simgs/7f618e340caf8d1c_15-1000/asian-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/63a18a8a008d4d2d_15-3579/traditional-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/bcf119ed013946de_15-1739/contemporary-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/af01732a0d23a798_15-6669/rustic-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/9351dd1300226ca7_15-5051/traditional-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/8511c53003205296_15-7228/beach-style-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/b151d63e02691dae_15-7522/farmhouse-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/17713aee00b8b8b7_15-7678/contemporary-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/9001c607024373e9_15-2696/traditional-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/93111938017af9bc_15-9856/contemporary-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/f3512a1300052564_15-4587/contemporary-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/52f1cab4020de25b_15-3918/mediterranean-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/7981aa8403c058e1_15-6222/mediterranean-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/0551552400b55756_15-5380/contemporary-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/5fa170b000f051c0_15-6732/farmhouse-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/3c3153270da524b2_15-9720/traditional-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/d931c502035da8da_15-1082/contemporary-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/db1177f003612e1b_15-7727/asian-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/7851611700608718_15-7654/farmhouse-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/36f1f14a036a87fd_15-1802/tropical-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/56b19bf80f7c817c_15-6711/traditional-landscape.jpg" width="250">
    <img src="http://st.houzz.com/simgs/f601583f01cbd891_15-3060/traditional-landscape.jpg" width="250">
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
WookMark
$('img').wookmark({
    container: $('#container')
});
ready
Masonry
$('#container').masonry({
    itemSelector: 'img'
});
ready
jquery gridify
$('#container').gridify({
    srcNode: 'img'
});
ready
Isotope v2
$('#container').isotope({
    itemSelector: 'img'
});
ready
javascript gridify
document.querySelector('#container').gridify({
    srcNode: 'img'
});
ready
yui3 gridify
YUI().use('node', 'gridify', function(Y){
    Y.one('#container').gridify({
        srcNode: 'img'
    });
});
ready

Revisions

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