砌体布局不能始终如一地调整

Question

点击每个＆＃34;更多＆＃34;从左到右按钮（变为＆＃34;较少＆＃34;），当单击第一行的最后一个图块的按钮时，图块不能正确重组，直到调整窗口大小（即使是一点点） ）。

默认情况下启用

initLayout：true 和 resize：true ，但即使在切换（）运行时再次显式设置它们也无法解决问题。

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

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

好了到目前为止......

底部磁贴应位于下一行，不包括扩展内容。但是在调整窗口大小时，网格会自行修正。

＆＃13;

＆＃13;

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");
        }
    });

});

＆＃13;

.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;    
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将网格的重新初始化移动到toggle（）内的匿名函数可以解决问题：

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

感谢@xhadf layout / masonry - delayed layout adjustment - one click behind