javascript - Masonry 和动态选项卡

标签 javascript jquery html jquery-masonry

我有一个包含动态选项卡的页面。选项卡内的内容根据用户选择的选项卡而变化。我希望使用 Masonry 来布局该内容，使其看起来不错。

问题在于:当用户切换选项卡时，内容会折叠。像这样: enter image description here

如果用户调整窗口大小，它会正确响应并布局。像这样: enter image description here

现在我很确定我知道问题出在哪里。我在 HTML 上使用 masonry 而不是 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>

最佳答案

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

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参数有效。我认为它只能采用类似宽度的值(您可以使用 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/

关于javascript - Masonry 和动态选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44475067/

上一篇：javascript - Typescript:无法访问类属性

下一篇：javascript - $(document).open() 在这些情况下不起作用

相关文章：

php - 选择单选按钮时验证一组下拉菜单 Jquery/PHP

javascript - jQuery文件上传插件错误

javascript - 获取 iframe 内容的宽高

javascript - 如果没有匹配的内容，则删除元素及其值

javascript - 记录整个测试过程中的持久性问题

javascript - 在 javascript 中向 ListView 添加元素时出现问题？

Jquery - 获取构造的div的高度

html - 如何删除选择框上的箭头 (Firefox)

javascript - 是否可以在 ES2015 中导入类方法

javascript - 在 JS 中撤消覆盖的粘贴

©2024 IT工具网  联系我们