- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我尝试将同位素库放入具有灵活宽度的列中。
不幸的是,它只有在我更改浏览器窗口大小时才有效。
这是我的代码:
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer'
}
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress(function() {
$grid.isotope('layout');
});
// Toggle Functions
$("#one_link").click(function() {
$("#categories").toggle();
$("#text_three").hide();
$("#cats_gallery").hide();
$("#text_two").hide();
});
$("#cats_link").click(function() {
$("#cats_gallery").toggle();
$("#text_two").hide();
$("#text_three").hide();
});
$("#two_link").click(function() {
$("#text_two").toggle();
$("#categories").hide();
$("#cats_gallery").hide();
$("#text_three").hide();
});
$("#three_link").click(function() {
$("#text_three").toggle();
$("#categories").hide();
$("#cats_gallery").hide();
$("#text_two").hide();
});
* {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 30px;
line-height: 100%;
cursor: default;
font-family: Arial;
}
html,
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.content {
display: flex;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.column {
border-right: 1px solid;
}
.column_content {
overflow-y: scroll;
width: 100%;
height: 100%;
padding: 20px;
}
.column {
display: none;
}
.column:first-child {
display: block;
}
li:hover {
cursor: pointer;
}
#cats_gallery {
width: 100%;
height: 100%;
}
.grid {
background: #DDD;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
width: 33.333%;
}
.grid-item {
float: left;
}
.grid-item img {
display: block;
max-width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<script src="https://npmcdn.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
<div class="content">
<div class="column">
<div class="column_content">
<ul>
<li id="one_link">One</li>
<li id="two_link">Two</li>
<li id="three_link">Three</li>
</ul>
</div>
</div>
<div id="categories" class="column">
<div class="column_content">
<ul>
<li id="cats_link">Cats</li>
</ul>
</div>
</div>
<div class="column" id="cats_gallery">
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/golden-hour.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/flight-formation.jpg" />
</div>
</div>
</div>
<div class="column" id="text_two">
<div class="column_content">
<p>2 (two) is a number, numeral, and glyph. It is the natural number following 1 and preceding 3. It is the smallest and only even prime number. Because it forms the basis of a duality, it has religious and spiritual significance in many cultures.</p>
</div>
</div>
<div class="column" id="text_three">
<div class="column_content">
<p>3 (three) is a number, numeral, and glyph. It is the natural number following 2 and preceding 4, and is the smallest odd prime number. It has religious or cultural significance in many societies.</p>
</div>
</div>
</div>
画廊隐藏在“One” – “Cats”中。
我尝试过使用不同的 onload 事件,但效果不佳。
如果有人能帮助我,我会非常高兴!
最佳答案
随着#cats_gallery
的可见性切换,可用的垂直空间将通过同位素重新计算。这是由于 masonry
布局模式造成的。要解决您遇到的问题,您应该在可见性更改后触发布局
。
在您的代码中,您需要更改以下内容:
$("#cats_link").click(function() {
$("#cats_gallery").toggle();
$("#text_two").hide();
$("#text_three").hide();
});
这样:
$("#cats_link").click(function() {
$("#cats_gallery").toggle(function () {
$grid.isotope('layout');
});
$("#text_two").hide();
$("#text_three").hide();
});
要删除过渡,请将 transitionDuration
属性设置为零 (0):
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer'
},
transitionDuration: 0
});
另外,将切换持续时间设置为 0。更新此行(注意回调函数之前的 0 参数):
$("#cats_gallery").toggle(0, function () {
$grid.isotope('layout');
});
关于javascript - 同位素 : Gallery with flexible column width does not work in specific case,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61162010/
有没有办法保持定位完整,但使元素不可点击?演示 here 。 通过添加另一个类而不是 .element,我失去了定位。 抱歉没有添加具体的代码示例,因为我不确定在哪里解决这个问题(标记、CSS 或 j
使用同位素 extension of perfectMasonry by zonear 到目前为止,它看起来运行良好,我想知道是否有人知道如何将容器居中。尝试使用 css 但没有运气。原始同位素has
我已经和同位素斗争了一段时间了。经过几次不同的坐着之后,我似乎无法弄清楚这一点。 isotope.metafizzy.co/index.html 我将用图像来说明我的问题,但这是解释。正如您在我的网站
我使用此代码来运行具有 RTL 支持的 Isotope $.Isotope.prototype._positionAbs = function( x, y ) { return { right:
我使用同位素作为精美布局中链接内容的分类组织者。我正在尝试将多个值插入一个数组中,以便它将显示过滤器触及的所有项目。然而,最终结果只是显示数组中的最新项目而不是总和。最初,我将所有值插入一个字符串,然
我对同位素插件有一个小问题。当我的网页加载时,Isotope 将显示所有元素。我想让它显示一个类别。我怎样才能实现它? 预先感谢您的帮助! 最佳答案 只需在首次调用同位素的选项中提供一个过滤器,该过滤
就目前情况而言,这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放,visit
我问过类似的问题,但仍然想知道为什么我无法删除selected我认为这是删除 selected class 的正确操作 $(this).parents('.item').removeClass('se
我的容器是 800px。该空间被投资组合容器占用。然后单击按钮以启用过滤器菜单,然后告知投资组合容器的宽度为 610px,从而为过滤器菜单留出剩余空间。我正在使用 reLayout 调用来尝试更新项目
我在下面的例子中使用了代码: http://jsfiddle.net/desandro/zhbLL/3/embedded/result,js,css,html,resources/ 但希望将所选元素设
假设我想过滤颜色(红色、黄色或蓝色)、尺寸(小号、中号或大号)和 Material (羊毛、棉、丝绸)。我将有三组复选框。如果用户选中“红色”复选框和“中号”复选框,我希望 Isotope 显示红色和
按照有关 infinite scroll 的说明进行操作,我能够隐藏第 2、3、4 等页面中的新内容,直到它完成加载并制作动画。现在我想实现相同的效果,但主要内容是什么,第一页是什么。有什么帮助吗?我
我正在构建一个页面,其中的 block 由 Isotope 控制,我想插入一个分隔符。这是我的例子:
我正在尝试实现 Jquery Isotope。当我单击列表项中的过滤器时,没有任何反应。这些元素不会过滤或动画。如果有人可以提供帮助,那就太好了!谢谢! Jfiddle:http://jsfiddle
目前的运作方式: 默认显示最新的6个项目 当按下特定列表时,它会显示该类别中的最新帖子,即最新的 6 个项目。例如:它显示 Foto 中最新的 4 个,因为 6 个中的 4 个是 Foto 类别。这意
我花了大量时间试图让同位素和延迟加载一起工作。 问题:如果用户向下滚动,延迟加载会起作用,但是如果用户使用过滤器,项目会显示在顶部,但图像不会加载。 这是一个有同样问题的人,但他似乎解决了这个问题。我
我能找到的有关同位素动画的所有信息均适用于版本 1:http://isotope.metafizzy.co/v1/docs/animating.html 似乎没有任何关于同位素 2 的文档。有谁知道我
我们的插件 ( http://isotope.metafizzy.co/ ) 有问题,但它运行得很好。 但是我对盒子的顺序有疑问。我想知道是否可以从左到右排列。我已在屏幕 here 中说明了我的问题.
JQuery Masonry 和 Isotope 允许您拥有静态的 Cornerstamp,而页面的其余部分是动态的。 http://isotope.metafizzy.co/custom-layou
尝试让我的画廊正常运行。现在我使用 isotope.js 来过滤我的画廊,并使用 photoswipe.js 作为灯箱。 我的问题是,即使它正确地过滤了图库,photoswipe 仍然显示所有图像。
我是一名优秀的程序员,十分优秀!