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

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',
});

我有几个内有文字的砖石制品。单击 'read more' 时会显示更多文本（将 .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/

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

layout / masonry - delayed layout adjustment - one click behind

javascript

jquery

jquery-masonry

masonry