Closed petrospap closed 8 years ago
Hello I am totally new to freewall, and i spend three days to make work pinterest-layout with filters my setup is this
$(function() { var wall = new Freewall("#freewall"); wall.reset({ selector: '.brick', animate: true, cellW: 200, // cellH: 'auto', cellH: function(height) { return height / 10; }, fixSize: 0, onResize: function() { wall.refresh(); } }); $(document).on('click', '.filter-label', function(){ $(".filter-label").removeClass('active'); var filter = $(this).addClass('active').data('filter'); if (filter) { wall.filter(filter); } else { wall.unFilter(); } }); wall.fitWidth(); });
The trick is
// cellH: 'auto', cellH: function(height) { return height / 10; },
CSS
.brick { float:left; width: 221.2px; /*min-height:auto;*/ height:auto; max-height: 340px; } @media screen and (-webkit-min-device-pixel-ratio:0){ .brick { float:left; width: 221.2px; min-height:200px; height:auto; max-height: 340px; } } .brick a{ height:auto; } .brick img { width:100%; height:100%; margin: 0; padding: 0; display: block; box-shadow: 1px 1px 3px rgba(0,0,0,0.55); border-radius: 3px }
html
<div class="brick poster"> <a href="img/poster1.jpg" data-lightbox="all" data-title="poster1"> <img src="img/poster1_thumb.jpg"> </a> </div> <div class="brick illustrator"> <a href="img/illustrator1.jpg" data-lightbox="all" data-title="illustrator1"> <img src="img/illustrator1_thumb.jpg"> </a> </div> <div class="brick artwork"> <a href="img/artwork1.jpg" data-lightbox="all" data-title="artwork1"> <img src="img/artwork1_thumb.jpg"> </a> </div> etc
Note: I dont use [info] Thumb images dimensions 350X20 +-10px -- 200X200 +-10px -- 200X350 +-10px Also this setup not working in chrome, thats why i add @media screen -webkit Tested: last firefox, last opera, last ie10, last chrome
Happy me.. and Thank you for this amazing script!
Thank you for used Freewall ;)
Hello I am totally new to freewall, and i spend three days to make work pinterest-layout with filters my setup is this
The trick is
CSS
html
Note: I dont use [info] Thumb images dimensions 350X20 +-10px -- 200X200 +-10px -- 200X350 +-10px Also this setup not working in chrome, thats why i add @media screen -webkit Tested: last firefox, last opera, last ie10, last chrome
Happy me.. and Thank you for this amazing script!