为什么JQuery Masonry,当我点击浏览器上的"返回"时,它会将用户重新回到顶端？

Question

为什么它不能保持用户离开的位置？这对砌体来说是正常的吗？当用户点击回来时,浏览器会转到用户离开的地方,但奇怪的是,Masonry让它回到了顶部!

顺便说一句,刷新工作正常.它将滚动条移动到用户离开的位置.但是回来不起作用.

编辑:当我点击"返回"时,它位于顶部.但后来我向下滚动了一点点(2个像素).然后浏览器将跳回到左侧的位置.

数目字.

编辑:如果我禁用此行,它将工作:

$('#grid').masonry({ columnWidth:250, itemSelector:".awallpost", animate:false, resizeable:false });

Answer 1

我想我有一个解决方法,但你需要试一试.当我单步执行代码并手动执行时,它会起作用,我认为它会起作用.我会在底部解释.

在您调用masonry()插件的代码行之前...

$('#grid').masonry({ columnWidth:250, itemSelector:".awallpost", animate:false, resizeable:false });

...将网格的高度设置为当前高度.

var $grid = $('#grid');
$grid.height( $grid.height() ); // fix the height at its current height

$('#grid').masonry({ columnWidth:250, itemSelector:".awallpost", animate:false, resizeable:false });

如果这在您最初加载时或在某些浏览器中给您带来问题,那么请尝试设置.height()仅当它大于某个数量时.尝试0或一些小数字250.

var $grid = $('#grid');
var height = $grid.height();

if( height > 0 ) { // or some other number
    $grid.height( height );
}

$('#grid').masonry({ columnWidth:250, itemSelector:".awallpost", animate:false, resizeable:false });

问题的原因似乎是因为masonry设置了每个项目的定位absolute,然后它遍历它们并手动设置它们top并left定位到它们接收absolute定位之前的任何位置.

麻烦的是,在masonry有机会设置位置之前,由于内部物品不再影响其高度,因此#grid会变得坍塌到0高处.

看起来好像在某些浏览器中,当文件的高度#grid(以及文档的其余部分)折叠时,它会忘记其滚动位置.这就是为什么我们在调用之前将其高度设置为设定量masonry(),以便在内容absolute定位时不会崩溃.