在循环后执行masonry

Question

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

但是，当我调整浏览器的大小时，图像确实可以正确地重新排序。

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

link to website

<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')；} })；