布局/砌体-延迟的布局调整-落后一键

Question

好的，这是问题所在https://jsfiddle.net/yq7f1a63/1/

这是我的代码：

$(function () {
 $('.content').hide();
 $('a.read').click(function () {

     $(this).parent('.excerpt').hide();
     $(this).closest('li').find('.content').slideDown('fast');
     $('ul').masonry('layout');
     return false;
 });
 $('a.read-less').click(function () {

     $(this).parent('.content').slideUp('fast');
     $(this).closest('li').find('.excerpt').show();
     $('ul').masonry('layout');
     return false;       
 });
 });

 $('ul').masonry({
  itemSelector: 'li',
});

我有几个砖砌的物品，里面有文字。 单击“阅读更多”时，它将显示更多文本（将.excerpt替换为.content）。

单击每个项目以显示更多内容时，我正在使用布局方法来调整网格，但是由于某种原因，它仅落后一格。 因此，例如，我单击了第一项的更多内容，但它出错了，但是随后，我单击了下一项的更多内容，它会调整为第一项的布局，以此类推！

有什么想法的人吗？ 提前致谢 ：-）

Answer 1

在slideDown（）或slideUp（）完成之后，您需要调整网格。 因此，将该代码添加到其完整的回调函数中。

$(function () {
     $('.content').hide();
     $('a.read').click(function () {

         $(this).parent('.excerpt').hide();
         $(this).closest('li').find('.content').slideDown('fast',function(){
            $('ul').masonry('layout');
         });         
         return false;
     });
     $('a.read-less').click(function () {

         $(this).parent('.content').slideUp('fast',function(){
            $(this).closest('li').find('.excerpt').show();
            $('ul').masonry('layout');
         });         
         return false;       
     });
 });

 $('ul').masonry({
  itemSelector: 'li',
});

JSFiddle： https ：//jsfiddle.net/yq7f1a63/2/