砌体和动态标签

Question

我有这个包含动态标签的页面。选项卡内的内容根据用户选择的选项卡而变化。我想让这些内容与砌体一起布置，以使它看起来不错。

问题在于：当用户切换标签时，内容会崩溃。像这样：

如果用户玩窗口大小，它会响应并正确布局。像这样：

现在我很确定我知道这里的问题是什么。我在HTML上使用砌体而不是jquery： <div class="row" data-masonry='{ "columnWidth": ".news-box", "itemSelector": ".news-box" }'>

所以我认为问题是如果内容没有加载（在这种情况下是图像），HTML上的砌体效果不好。我一直在寻找解决这个问题的JQuery方法，我的问题是我无法让JQuery因某些原因而工作。这个站点在ASP.NET上，我无法在JQuery上进行砌体处理，这就是我坚持使用HTML的原因。

这是我用JQuery尝试过的，但没有任何成功：

<script>
    $('.row').masonry({
        itemSelector: '.news-box',
        columnWidth: '.news-box'
    });
</script>

我知道这段代码不会等待图片加载。我的观点是，我没有得到任何结果，甚至错误地使用该代码。

有什么方法可以在HTML上解决这个问题吗？这样做，以便当用户切换标签时，内容完美地布置为开头？

编辑：我使用了vanilla JS

var msnry = new Masonry('.row', {
    columnWidth: '.news-box',
    itemSelector: '.news-box'
});

也许我可以在这里获得一个事件处理程序？提示？

复制问题的示例代码

<!--TABS-->
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<!--TAB CONTENT-->
<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
        <!--DUMMY CONTENT FOR MAIN TAB-->
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
                <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
                <h4>title</h4>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
                <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
                <h4>title title title title title title title title title title title title title title</h4>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
                <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
                <h4>title</h4>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
                <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
                <h4>title title title title title title title</h4>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
                <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
                <h4>title</h4>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
                <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
                <h4>title title title title title title title title title title title title title title</h4>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
                <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
                <h4>title</h4>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
                <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
                <h4>title title title title title title title</h4>
            </div>
        </div>
    </div>
    <div id="menu1" class="tab-pane fade">
        <!--DUMMY CONTENT FOR SECONDARY TAB-->
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
                <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
                <h4>title</h4>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
                <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
                <h4>title title title title title title title title title title title title title title</h4>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
                <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
                <h4>title</h4>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
                <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
                <h4>title title title title title title title</h4>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
                <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
                <h4>title</h4>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
                <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
                <h4>title title title title title title title title title title title title title title</h4>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
                <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
                <h4>title</h4>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
                <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
                <h4>title title title title title title title</h4>
            </div>
        </div>
    </div>
</div>

Answer 1

实际解决方案，基于您提供的代码：

var updateMasonry = function(){
  $('.tab-pane.active').masonry({
    itemSelector: '.well',
  })
}

$('a[data-toggle="tab"]').on('shown.bs.tab', updateMasonry);
$(window).on('resize load', updateMasonry)

var updateMasonry = function(){
  $('.tab-pane.active').masonry({
    itemSelector: '.well',
  })
}

$('a[data-toggle="tab"]').on('shown.bs.tab', updateMasonry);
$(window).on('resize load', updateMasonry)

/* you don't need this css */
@media (min-width: 700px) {
.container {margin-top: 80px;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.0/masonry.pkgd.min.js"></script>

<div class="container">
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  </ul>

  <!--TAB CONTENT-->
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <!--DUMMY CONTENT FOR MAIN TAB-->
      <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
          <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
          <h4>title</h4>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
          <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
          <h4>title title title title title title title title title title title title title title</h4>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
          <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
          <h4>title</h4>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
          <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
          <h4>title title title title title title title</h4>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
          <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
          <h4>title</h4>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
          <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
          <h4>title title title title title title title title title title title title title title</h4>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
          <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
          <h4>title</h4>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
          <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
          <h4>title title title title title title title</h4>
        </div>
      </div>
    </div>
    <div id="menu1" class="tab-pane fade">
      <!--DUMMY CONTENT FOR SECONDARY TAB-->
      <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
          <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
          <h4>title</h4>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
          <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
          <h4>title title title title title title title title title title title title title title</h4>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
          <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
          <h4>title</h4>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
          <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
          <h4>title title title title title title title</h4>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
          <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
          <h4>title</h4>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
          <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
          <h4>title title title title title title title title title title title title title title</h4>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
          <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
          <h4>title</h4>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
          <img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
          <h4>title title title title title title title</h4>
        </div>
      </div>
    </div>
  </div>
</div>
<!--TABS-->

初步回答，展开......

您发布的<script>标记会在符合时运行。这意味着它将在以下时间执行：

• 您的DOM对象尚未完全构建
• 您的图片未加载（因为DOM构建比加载图片的速度快得多）。

这就是为什么你需要在window.load事件上推送代码的执行，这在所有资产加载完成时都会发生：

window.onload = function() {
  var msnry = new Masonry('.row', {
    columnWidth: '.news-box',
    itemSelector: '.news-box'
  });
};

另外，我不完全确定选择器columnWidth param是有效的。我认为它只能采用类似宽度的值（你可以25%来避免像素）。我的猜测是它目前被忽略了。它也没有多大意义，因为你给的是width你要调整大小的元素......

更多详情。
通过评论，您会尝试将.masonry()应用于放置在非活动标签中的内容。在大多数选项卡机制中，这意味着选项卡容器具有display:none，这使得它不会呈现，并且其width将返回0.因为masonry()使用容器的宽度来计算列，并且放置这些项目确实有效，但所有列都有0宽度。这是你可能想做的事情。

第1步。将您的masonry init方法放在函数中，以便在需要时调用它：

 var massonryInit = function() {
    var msnry  = new Masonry('.row', {
    columnWidth: '.news-box',
    itemSelector: '.news-box'
 });

第2步。在显示选项卡后，查看用于在选项卡内容上运行的回调方法的任何选项卡的文档。如果它们是Bootstrap选项卡，我们将讨论shown.bs.tab事件，但我知道您没有使用Bootstrap，因为您没有使用jQuery。

在该方法上，您需要调用新声明的massonryInit()函数：

var yourTab = document.querySelector('yourTabSelectorHere');
yourTab.addEventListener("yourTabWasRenderedEvent", masonryInit);

请注意，上述方法仅适用于yourTabselectorHere返回的单个特定标签。如果该选择器与多个元素匹配，则该事件将仅添加到第一个匹配项。要将其添加到所有人，您需要.querySelectorAll()而不是.querySelector()，并且您需要在该集合上运行javascript for并将事件添加到每个集合。

默认情况下，JavaScript非常详细。这就是jQuery如此受欢迎的原因。它减少了将常用方法和任务编写为更短的语法。以上所有，使用jQuery将是：

var masonryInit = function(){
  $('.row').masonry({
    itemSelector: '.news-box',
  });
}
$('yourTabSelectorHere').on('yourTabWasRenderedEvent', masonryInit);

...它可以在多个标签上使用。不需要for循环。它将由jQuery在内部应用。

除了上面的重要解释之外，本文是一篇很好的解读： https://www.sitepoint.com/bootstrap-tabs-play-nice-with-masonry/

Answer 2

我找到的最好的简单解决方案是销毁并初始化：

演示（Tabby.js和石工）：https://codepen.io/ezra_siton/pen/KOLdBO?editors=1111

  

完全删除了砌体功能。销毁将返回   元素返回到其初始状态。

  $grid.masonry("destroy");
  $grid.masonry(masonryOptions);

流程（将此流程与您的标签代码一起使用）：**单击tabX显示contectX-销毁gridX而不是重新加载gridX-**魔术，没有任何复杂的技巧（例如超时或调整大小）：）

这个想法来自官方文档（Toggle Masonry）：

Masonry - destroy

• Codepen：https://codepen.io/desandro/pen/jPyoRE
• 文档：https://masonry.desandro.com/methods.html#destroy

为什么不使用“布局”（重新加载）？

因为只有在更改网格（添加/添加项，更改元素大小等）时，此想法才有效。

  // trigger layout after item size changes
  $grid.masonry('layout');

示例（切换类和更新布局）： https://masonry.desandro.com/methods.html#layout-masonry