【发布时间】:2015-07-15 08:12:16
【问题描述】:
我在 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');
});
});
});
【问题讨论】:
-
哪个版本的IE?并添加你的 CSS。最好在fiddle 演示中
-
所有这些,但是这个问题只在第一次加载时出现,当你点击过滤链接时一切都很好。这是您可以尝试直播的网站链接joannafoto.gaussx.com
-
在这种情况下,您需要imagesLoaded 插件,由给您同位素的同一个人编写
-
是的,现在一切正常。谢谢@giorgio
标签: javascript jquery jquery-isotope