jQuery Isotope - 具有两个不同大小元素的流体布局

发布于 2024-12-16 14:24:18 字数 512 浏览 2 评论 0原文

我在页面上有一个基本的照片布局（用于作品集）。有两种不同尺寸的图像块，较大的图像块与较小的图像块成比例，并且宽度和高度恰好是宽度和高度的两倍，并且块或窗口之间没有边距。只有几个较大的块与几十个较小的块混合在一起。它是一种响应式设计，因此在全尺寸网站上有 5 个 20% 列，当窗口大小降至某个宽度以下时，有 3 个 33.333% 列，所有这些都在 100% 最大宽度容器内。每块积木内部的图像均使用 CSS 设置为 100% 宽度和自动高度。我添加了一个线框来说明我所描述的内容。

我遇到的问题是让同位素响应流体布局。如果我在比最大宽度更宽的窗口中加载页面，它会完全按照预期放置块。然而，当我将浏览器窗口缩小到最大宽度以下时，这些块开始变得非常不稳定，有以下几种变化：堆叠在单列中；堆放在两列中，中间有一个空列；图像之间的间隙；在大图像下方留下一个空行。

我可能没有很好地解释自己，但只是想知道是否有人有使用同位素和流体布局的经验，并且可能有一些见解。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一绘本一梦想 2024-12-23 14:24:18

我能够通过省略同位素响应演示中的列计算代码行来实现此目的在这里。

$container.isotope({
    itemSelector : '.thumb',
    //disable resizing
    resizable: false,
});

//update columnWidth on window resize
$(window).smartresize(function(){
    $container.isotope({
    });
});

这保留了动画“智能调整大小”功能，但允许您使用常规 CSS 媒体查询来控制列数（将元素“.thumb”设置为媒体查询中容器的所需百分比）。

I was able to achieve this by omitting the column calculation lines of code from the isotope responsive demo here.

$container.isotope({
    itemSelector : '.thumb',
    //disable resizing
    resizable: false,
});

//update columnWidth on window resize
$(window).smartresize(function(){
    $container.isotope({
    });
});

This maintains the animated 'smart resize' capability but allows you to use regular css media queries to control the number of columns (set the element ".thumb" to the desired percentages of the container in your media queries).

回复收藏 0 原文