你好我使用jQuery Splitter和Masonry。 这是我的代码:
$(window).on('load', function(){
$('.grid').masonry({
isAnimated: true,
itemSelector: '.grid-item',
percentPosition: true,
horizontalOrder: false
});
})
var splitter = $('#content').split({
orientation: 'vertical',
position: '50%',
limit: 400,
onDrag: function(event) {
Splitter();
$('.grid').masonry({
itemSelector: '.grid-item',
percentPosition: true,
horizontalOrder: false
});
}
});
Splitter();
function Splitter(){
if ($('#right').width() < 600) {
$('.grid-item').css("width", "100%")
}
else if ($('#right').width() < 800) {
$('.grid-item').css("width", "50%")
}
else {
$('.grid-item').css("width", "33.3333%")
}
}
$( window ).resize(function() {
$('#main').css('min-height', '100%');
Splitter();
splitter.position('50%')
});
我遇到的问题是,当我调整窗口大小的大小时,在某些情况下(例如,当我将分离器移到右侧时),网格项目变得很小。 »$(window).resize(function()«中的»splitter.position('50%')«在某种程度上解决了该问题。
但是:如果我将拆分器拖动到右侧(到400px限制点)并调整大小,则窗口尺寸应尽可能小,网格项仍然会变得非常小。 »limit:400«命令优先于»splitter.position('50%')«。
我想要的是:如果调整窗口大小,则拆分器位置应始终保持50%。
怎么可能呢?
非常感谢。 <3