http://isotope.metafizzy.co/

Example: http://wsd2017.com/scenofest

Notes:

1. Default layoutMode: masonry
2. The “columnWidth” of masonry includes the space between items:
   http://203.69.102.188/~ludeya/index.php/skincare

CSS Example:

#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:

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;
}