Example: http://wsd2017.com/scenofest
Notes:
- Default layoutMode: masonry
- The “columnWidth” of masonry includes the space between items:
http://203.69.102.188/~ludeya/index.php/skincare
CSS Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#seminar_wrapper{ width: 960px; position: relative; } #seminar_wrapper .seminar{ float:left; } #seminar_wrapper .seminar iframe, #seminar_wrapper .seminar img{ max-width: 100%; } .isotope:after { content: ''; display: block; clear: both; } .floatcontainer{ position: relative; } |
JS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
function init_isotope(){ var $wrap = $('.mix-wrap2'); var $iso = $wrap.find('.isotope-wrap2').isotope({ itemSelector: '.mix', layoutMode: 'masonry', transitionDuration: '0.3s', transformsEnabled: false }); $wrap.find('select').on('change', function () { var self = $(this); $iso.isotope({ filter: get_filter_data() }); }); $wrap.find('.mix-category li a').on('click', function (e) { var self = $(this), fltr = self.data('filter'); e.preventDefault(); self.parent().addClass('active') .siblings().removeClass('active'); $iso.isotope({ filter: get_filter_data() }); }); } //Combine 2 filters function get_filter_data(){ var result = '*'; var cat = $('#categories li.active a').data('filter'); var sel = $('#selections').val(); if(cat == '*'){ if(sel == '*'){ //show all result = cat; }else{ //show part result = sel; } }else{ if(sel == '*'){ //show part result = cat; }else{ //combine result = cat + sel; } } return result; } |