砌体布局调整不一致 [英] Masonry layout does not adjust consistently
本文介绍了砌体布局调整不一致的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
从左到右单击每个更多"按钮(变为较少")，在单击第一行最后一个图块的按钮之前，直到调整窗口大小(甚至很小)时，图块均无法正确重组位).
Clicking each "more" button (which becomes "less") from left to right, the tiles don't reorganize correctly when clicking the button for the last tile of the first row until the window is resized (even by a tiny bit).
initLayout:true 和 resize:true ，但是即使在toggle()运行时再次显式设置它们也不能解决问题.
initLayout:true and resize:true are enabled by default but even when explicitly setting them again when toggle() runs did not solve the problem.
在页面加载和toggle()运行时都初始化网格:
I initialize my grid both when the page loads and when toggle() runs:
jQuery('.grid').masonry({itemSelector: '.tex-entry'});
到目前为止还可以...
Ok so far...
底部图块应位于下一行，而不覆盖扩展内容.但是在调整窗口大小后，网格会自行校正.
Bottom tile should be on the next row, not covering expanded content. But upon resizing the window, the grid corrects itself.
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>
推荐答案
将网格的重新初始化移动到toggle()中的匿名函数可解决此问题:
Moving the re-initialization of the grid to an anonymous function within toggle() fixes the issue:
jQuery("#tex-hide-default-" + toggle_num).toggle(200, function(){jQuery('.grid').masonry({itemSelector: '.tex-entry', containerStyle: null});});
感谢@xhadf 布局/砌筑-延迟的布局调整-在背后单击一遍
这篇关于砌体布局调整不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
