Question

我在这里有一个测试页：http://desertcinema.com/home-test/

我在其中一个display: none;处添加了内联<li>，我希望默认情况下会得到这样的结果：参见图片：

但是，我不知道发生了什么，但它实际上留下了一个空白区域，如下图所示：

我想知道如果没有那个空白区域我是否可以隐藏该列表项。这是我的代码的样子：

<ul class="portfolio-wrap">
    <li class="portfolio-box photography "> 
        <a class="gallery" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4bav1hxsgwj54nvaww.jpg" title="Concealment">
            <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" /> 
            <div class="mask"></div>
            <div class="line-folio"></div>
            <div class="line-folio1"></div>
            <h4>Concealment</h4>
        </a>
    </li>
    <li class="portfolio-box photography" style="display: none;"> 
        <a class="gallery" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/Mike-Full-Draw-30sp495yqivl82ubkxq5mo.jpg" title="Concealment">
            <img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" /> 
                <div class="mask"></div>
                <div class="line-folio"></div>
                <div class="line-folio1"></div>
                <h4>Concealment</h4>
           </a>
    </li>
</ul>

知道我错过了什么吗？如何在不获取空格的情况下隐藏项目？

Answer 1

有一件事是确保在加载页面后立即预先计算列。在您的情况下，我要做的是为您要隐藏的li元素创建一个类portfolio-box-hidden，并在您的css中创建

.portfolio-box-hidden {
  display:none;
}

新类应该覆盖要隐藏的元素的类 portfolio-box上课。

我浏览了你的template.js脚本，发现了与预先计算列有关的罪魁祸首，并负责将元素放在他们的预期位置。

通过阅读同位素文档，它会自动隐藏元素不包括在过滤器上。尝试在setProject上添加过滤器位于template.js文件上的方法。下面是更新的代码

function setProjects() { 
    setColumns();
    container.isotope({filter: ':not(.hidden)'},'reLayout');
}

然后在要隐藏的li元素上添加一个类hidden。

并添加以下代码以刷新元素，确保将其放在document ready event内，如果脚本工作正常，则可以删除seTimeout方法，仅添加setTimeout确保其中的方法将在一定时间后执行。

$(document).ready(function(){
  setTimeout(function(){
      $('.portfolio-wrap').isotope({filter: ':not(.hidden)'},'reLayout'); 
  }, 500);
});

Answer 2

$allIsotopes = $('.portfolio-wrap.isotope').children('li');
$allIsotopes.last().css('transform',$allIsotopes.eq(3).css('transform'));

首先我们得到所有.isotopes，（你可以改变选择器，如果你不喜欢它的方式）然后得到最后一个并将它的css放到第4个.isotopes所以我们不必调整其他人

解决方案是暂时的，我认为您使用的插件正在侦听窗口调整大小或其他东西

Answer 3

这是因为每个position的{{1}}在加载时都是li。你只需要使用下面的代码就可以了。

我已在calculated及其工作中使用此code。

希望这会有所帮助:) 的由于

website console

显示：none仍然显示空白页面（CSS问题）

3 个答案: