No need to code really.
Only thing you need to do is copy the code below into your footer custom code section (on your project settings like on the screenshot I made for you)
<!-- jquery 3.0 -->
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.1.js"></script>
<!-- masonry script -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script>
//use jQuery to initialize masonry grid
(function ($) {
'use strict';
$(window).load(function(){
$('.masonry').masonry({
itemSelector: '.masonry-item',
});
});
}(jQuery));
</script>
Then in the webflow designer, just add a normal collection list. The only thing you need to do, is add a “masonry” class to the collection list element and a “masonry-item” class to the collection’s item. That’s it !
Hope it helps
If you need more flexibility by filtering and ordering your items, you might want to use the isotope solution For a simple layout however, masonry is good enough.