我在IE上遇到同位素分类问题。除了排序之外,一切都很完美,它们都在一条水平线上,请参阅下面的附件。
所以这里是我的代码,其中初始化同位素,几个过滤的东西,项目的动画,以及添加不透明度和类到项目。
(function($) {
window.onload = function() {
// Animation items
$('.work .item').each(function(i) {
var item = $(this);
setTimeout(function() {
item.addClass('is-showing');
setTimeout(function() {
item.removeClass('hidden is-showing');
}, 700);
}, 150 * (i + 1));
});
};
$.fn.hideReveal = function(options) {
options = $.extend({
timeout: 1000,
filter: '*',
hiddenStyle: {
opacity: 0.2
},
visibleStyle: {
opacity: 1
},
}, options);
var that = this;
that.each(function() {
var $items = $(this).children();
var $visible = $items.filter(options.filter);
var $hidden = $items.not(options.filter);
// reveal visible
$visible.animate(options.visibleStyle, options.timeout);
$visible.addClass("visible-item");
// hide hidden
$hidden.animate(options.hiddenStyle, options.timeout);
$hidden.removeClass("visible-item");
if (options.filter == '*') {
jQuery('.visible-item').removeClass('visible-item');
}
});
setTimeout(function() {
that.isotope({
getSortData: {
visible: function(elem) {
return !$(elem).hasClass("visible-item");
}
},
sortBy: 'visible'
})
that.isotope("updateSortData");
that.isotope({
sortBy: 'visible'
});
}, options.timeout);
};
$(function() {
var $container = $('#isotope-list');
$container.imagesLoaded( function(){
$container.isotope({
itemSelector: '.item',
layoutMode: 'masonry',
sortAscending: true
});
});
// bind filter button click
$('#filters').on('click', 'a', function() {
var filterValue = $(this).attr('data-filter');
$container.hideReveal({
filter: filterValue,
timeout: 500
});
});
// change is-checked class on buttons
$('#filters').each(function(i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'a', function() {
$buttonGroup.find('.selected').removeClass('selected');
$(this).addClass('selected');
});
});
});