砌体布局调整不一致

Question

从左到右单击每个 "more" 按钮（变为 "less"），当单击第一行最后一个图块的按钮时，图块不会正确重新组织，直到 window 已调整大小（即使是一点点）。

initLayout:true 和 resize:true 默认启用，但即使在 toggle() 运行时再次明确设置它们也没有解决这个问题。

我在页面加载和 toggle() 运行时初始化我的网格：

jQuery('.grid').masonry({itemSelector: '.tex-entry'});

到此为止...

底部图块应在下一行，不覆盖展开的内容。但是在调整 window 的大小时，网格会自行纠正。

jQuery(document).ready(function () {
    
    //initialize the grid
    jQuery('.grid').masonry({itemSelector: '.tex-entry'});
 
     jQuery("button.tex_overlay_button").click(function () {
  
  var id = this.id;
        var toggle_num = parseInt(this.id.replace("tex-toggle-", ""), 10);

  jQuery("#tex-hide-default-" + toggle_num).toggle(200);
  
  //reinitialize the grid when any toggle button is clicked - not working consistently until/unless window is resized. 
  jQuery('.grid').masonry({itemSelector: '.tex-entry'});

  var content = jQuery("button#tex-toggle-" + toggle_num).html().toString();
        
        if (content === "more") {
            jQuery("button#tex-toggle-" + toggle_num).html("less");
        } else if (content === 'less') {
            jQuery("button#tex-toggle-" + toggle_num).html("more");
        }
    });

});

.tex_content_wrapper{width:90%;}
.tex-hide-default{display:none;}

.tex-image-main{width: 100%; height: 280px; }
.tex-entry{   
    display: inline-block;
    position: relative;
    width: 280px;
    margin-right: 10px;
    float:left;
    margin-bottom:8px;
}

h2.tex_overlay{
    position: absolute;
    top: 40px;
    width: 99.9%; 
}

button.tex_overlay_button{
    position: absolute;
    top: 245px;
    left: 1px;
    width: 60px;
    margin-left:110px;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>
<section id="primary" class="site-content"> <div id="content" role="main" class="tex_content_wrapper"> <div class="grid"> <div class="tex-entry" id="tex-entry-149" > <div class="tex-show-default" id="tex-show-default-149"> <img class="tex-image-main" id="tex-image-main-149" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Red_Rock_Canyon_National_Conservation_Area_-_Blue_Diamond%2C_Nevada.jpg"/> <h2 class="tex_overlay"><span><span class="tex-location-overlay-title" id="tex-location-overlay-title-149"><br>abc</span><br><br>(multiple locations)<br></span></h2> <button class="tex_overlay_button" id="tex-toggle-149">more</button> </div><div class="tex-hide-default" id="tex-hide-default-149"> <p class="tex-description" id="tex-description-149">Et corrupti occaecati tempore totam unde. Quia ut culpa voluptatem eum repudiandae commodi. Sint corporis velit sed.</p><div class="tex-term-list" id="tex-location-149"> <span class="tex-term-list-header">Location: </span> </div><div class="tex-term-list" id="tex-status-149"><span class="tex-term-list-header">Status: </span>Scientist Wanted</div><div class="tex-term-list" id="tex-category-149"><span class="tex-term-list-header">Category: </span><em>Learn More...</em></div></div></div><div class="tex-entry" id="tex-entry-66" > <div class="tex-show-default" id="tex-show-default-66"> <img class="tex-image-main" id="tex-image-main-66" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Red_Rock_Canyon_National_Conservation_Area_-_Blue_Diamond%2C_Nevada.jpg"/> <h2 class="tex_overlay"><span><br>def<br>-<br>ghi<br><span class="tex-location-overlay-title" id="tex-location-overlay-title-66"><br>jkl</span></span></h2> <button class="tex_overlay_button" id="tex-toggle-66">more</button> </div><div class="tex-hide-default" id="tex-hide-default-66"> <p class="tex-description" id="tex-description-66">Et corrupti occaecati tempore totam unde. Quia ut culpa voluptatem eum repudiandae commodi. Sint corporis velit sed.</p><div class="tex-term-list" id="tex-location-66"> <span class="tex-term-list-header">Location: </span> Washington, DC </div><div class="tex-term-list" id="tex-status-66"><span class="tex-term-list-header">Status: </span>Scientist Wanted</div><div class="tex-term-list" id="tex-tags-66"><span class="tex-term-list-header">Tags: </span><em>Learn More...</em></div></div></div><div class="tex-entry" id="tex-entry-60" > <div class="tex-show-default" id="tex-show-default-60"> <img class="tex-image-main" id="tex-image-main-60" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Red_Rock_Canyon_National_Conservation_Area_-_Blue_Diamond%2C_Nevada.jpg"> <h2 class="tex_overlay"><span><span class="tex-location-overlay-first" id="tex-location-overlay-first-60"><br>occaecati</span><br><span class="tex-location-overlay-title" id="tex-location-overlay-title-60"><br>Et corrupti occaecati </span></span></h2> <button class="tex_overlay_button" id="tex-toggle-60">more</button> </div><div class="tex-hide-default" id="tex-hide-default-60"> <div class="tex-term-list" id="tex-location-60"> <span class="tex-term-list-header">Location: </span> Kentucky </div><div class="tex-term-list" id="tex-status-60"><span class="tex-term-list-header">Status: </span>In-Progress</div><div class="tex-term-list" id="tex-category-60"><span class="tex-term-list-header">Category: </span><em>Learn More...</em></div></div></div><div class="tex-entry" id="tex-entry-57" > <div class="tex-show-default" id="tex-show-default-57"> <img class="tex-image-main" id="tex-image-main-57" src="https://upload.wikimedia.org/wikipedia/commons/5/54/Red_Rock_Canyon_National_Conservation_Area_-_Blue_Diamond%2C_Nevada.jpg"/> <h2 class="tex_overlay"><span><span class="tex-location-overlay-first" id="tex-location-overlay-first-57"><br>asdfghjk</span></span></h2> <button class="tex_overlay_button" id="tex-toggle-57">more</button> </div><div class="tex-hide-default" id="tex-hide-default-57"> <div class="tex-term-list" id="tex-location-57"> <span class="tex-term-list-header">Location: </span> Colorado </div><div class="tex-term-list" id="tex-status-57"><span class="tex-term-list-header">Status: </span>In-Progress</div><div class="tex-term-list" id="tex-tags-57"><span class="tex-term-list-header">Tags: </span><em>Learn More...</em></div></div></div></div></div><br><br></section>

Answer 1

将网格的重新初始化移动到 toggle() 中的匿名函数修复了问题：

jQuery("#tex-hide-default-" + toggle_num).toggle(200, function(){jQuery('.grid').masonry({itemSelector: '.tex-entry', containerStyle: null});});

感谢@xhadf

砌体布局调整不一致

Masonry layout does not adjust consistently

jquery

jquery-masonry

masonry