javascript - 循环后执行砌体

Question

单击图像以显示以下内容后，似乎无法重新排序我的图像。

但是，当我调整浏览器大小时，图像会正确重新排序。

我已经尝试了很多，但我被卡住了，我只想在点击下一张图片后再次点燃砖石。

链接到网站

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.masonry.min.js"></script>
<script src="js/jquery.cycle.all.js"></script>

<script>
  $(function(){

    $('#container').masonry({
      itemSelector: '.box',
      columnWidth: 20,
      isAnimated: !Modernizr.csstransitions,
      isFitWidth: true
    });

  });
</script>



<script>
$(document).ready(function(){
    $('#projectslide').cycle({ 
        fx:     'fade',
        speed:  0, 
        next:   '#projectslide',
        timeout: 0,
        fit: 1,
        slideResize: 1,
        reshape: 1,
    });
});

    $('#container').masonry({
      itemSelector: '.box',
      columnWidth: 20,
      isAnimated: !Modernizr.csstransitions,
      isFitWidth: true,
    });
</script>

Answer 1

在 Cycle 插件 ( http://jquery.malsup.com/cycle/int2.html ) 的文档中，作者展示了如何定义回调函数，因此您可以执行以下操作：

$('#projectslide').cycle({ fx: 'fade', speed: 0, next: '#projectslide', timeout: 0, fit: 1, slideResize: 1, reshape: 1, after: function() { $('#container').masonry('reload'); } });