Question

我使用masonry和window.history.pushState html5脚本创建了布局。例如，我有5个菜单项。每个菜单项都包含网格。一切似乎都很完美，但问题是，当我点击下一个菜单项时，砌体停止工作。然后，我尝试在单击菜单项时重新加载modernizr。现在，当我点击菜单项不是一次，而是两次时，砌体开始工作。

HTML：

<div class="blokeliai">
  <img src="img/single-6.jpg" alt="" />
</div>

<div class="blokeliai">
  <img src="img/single-7.jpg" alt="" />
</div>

etc...

<script>
   $(document).ready(function() { $.getScript('js/modernizr-2.5.3.min.js', function() { }); });
</script>

砌体

$('.page-content').masonry({
    itemSelector: '.blokeliai',
    isAnimated: !Modernizr.csstransitions
}).imagesLoaded(function() {
    $(this).masonry('reload');
});

窗口历史记录pushState

每个菜单项都有自己的php文件。

<?php
error_reporting(E_ALL ^ E_NOTICE);
if($_GET['type']!='ajax'){
include 'header.php';
echo "<div class='page-content'>";
}
?>

//<div class="blokeliai">...etc... GOES HERE

<?php
if($_GET['type']!='ajax'){
echo "</div>";
include 'footer.php';
}?>

如何在不对每个菜单项点击两次的情况下使砌体工作，但正常，一次点击？谢谢你，抱歉英语不好。

Answer 1

所有剧本都错了。默认情况下，砌体工作正常，但是使用历史pushState，你需要在ajax调用后重新加载砌体。

$(document).ready(function() {
  $('.masonry').masonry({
   itemSelector: '.item'
  });
});
$( document ).ajaxComplete(function() {
$('.masonry').masonry('reloadItems').masonry();
});

砌体（网格）与window.history.pushState

1 个答案: