css - 如何实现连续且没有间隙的响应式砌体式布局？-6ren

css - 如何实现连续且没有间隙的响应式砌体式布局？

转载作者：太空宇宙更新时间：2023-11-04 06:01:33

如何实现与 Pintrest 具有相似属性的布局？

具体来说:

所有图片宽度相同的自适应布局。
所有图片都包含在一个 div 中。没有多个容器试图复制“列”，例如使用 flexbox。
布局的顺序是没有间隙的。比如布局是两列，图片是宽高:[(100,400), (100,100), (100,400), (100,100), (100,400), (100,100)]，列的高度将大致相同，而不是左侧的 1200 和右侧的 400。下面的屏幕截图说明了这一点。

这是一个屏幕截图，显示所有照片都在一个 div 容器中。

响应式布局:

第三个要点的示例:深色淋浴图片位于悬挂座椅图片下方，而不是外部房屋图片下方。这是因为吊座图的高度较小。

类似地，当布局为两列宽时:卧室的图片位于扶手椅下方，因为悬挂的座椅图片高度较小。

虽然这篇文章看起来类似于 CSS-only masonry layout ，解决方案不会产生预期的结果:

使用@Oliver Joseph Ash 解决方案会导致:

grid-container {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  /* Your container needs a fixed height, and it 
   * needs to be taller than your tallest column. */
  height: 960px;
  /* Optional */
  background-color: #f7f7f7;
  border-radius: 3px;
  padding: 20px;
  width: 60%;
  margin: 40px auto;
  counter-reset: items;
}

grid-item {
  width: 24%;
  /* Optional */
  position: relative;
  margin-bottom: 2%;
  border-radius: 3px;
  background-color: #a1cbfa;
  border: 1px solid #4290e2;
  box-shadow: 0 2px 2px rgba(0, 90, 250, 0.05), 0 4px 4px rgba(0, 90, 250, 0.05), 0 8px 8px rgba(0, 90, 250, 0.05), 0 16px 16px rgba(0, 90, 250, 0.05);
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
}

<grid-container>
  <grid-item>
    <a href="https://g.foolcdn.com/image/?url=https%3A%2F%2Fg.foolcdn.com%2Feditorial%2Fimages%2F492452%2Fgettyimages-1014028076.jpg&w=700&op=resize">
      <img src="https://g.foolcdn.com/image/?url=https%3A%2F%2Fg.foolcdn.com%2Feditorial%2Fimages%2F492452%2Fgettyimages-1014028076.jpg&w=700&op=resize">
    </a>
  </grid-item>
  <grid-item>
    <a href="https://image.jimcdn.com/app/cms/image/transf/none/path/sa716b1500dd60f05/image/ic839a74ed6a8a054/version/1519833130/image.jpg">
      <img src="https://image.jimcdn.com/app/cms/image/transf/none/path/sa716b1500dd60f05/image/ic839a74ed6a8a054/version/1519833130/image.jpg">
    </a>
  </grid-item>
  <grid-item>
    <a href="https://c8.alamy.com/comp/AXBEXR/stock-photograph-of-a-asian-teen-with-a-trumpet-to-her-ear-AXBEXR.jpg">
      <img src="https://c8.alamy.com/comp/AXBEXR/stock-photograph-of-a-asian-teen-with-a-trumpet-to-her-ear-AXBEXR.jpg">
    </a>
  </grid-item>
  <grid-item>
    <a href="https://thumbs.dreamstime.com/z/cyber-woman-orange-11363555.jpg">
      <img src="https://thumbs.dreamstime.com/z/cyber-woman-orange-11363555.jpg">
    </a>
  </grid-item>
  <grid-item>
    <a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThObqAcFeb4byMcwLVkU1JVMYonpavYmEukk9r3rqF2oBTnd1q">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThObqAcFeb4byMcwLVkU1JVMYonpavYmEukk9r3rqF2oBTnd1q">
    </a>
  </grid-item>
  <grid-item>
    <a href="https://www.demilked.com/magazine/wp-content/uploads/2018/03/5aaa1cce4180b-funny-weird-wtf-stock-photos-57-5a3bb7ba3c266__700.jpg">
      <img src="https://www.demilked.com/magazine/wp-content/uploads/2018/03/5aaa1cce4180b-funny-weird-wtf-stock-photos-57-5a3bb7ba3c266__700.jpg">
    </a>
  </grid-item>
  <grid-item>
    <a href="https://static.boredpanda.com/blog/wp-content/uploads/2018/05/emilia-clarke-making-stock-photos-5-5b0801c7504b2__700.jpg">
      <img src="https://static.boredpanda.com/blog/wp-content/uploads/2018/05/emilia-clarke-making-stock-photos-5-5b0801c7504b2__700.jpg">
    </a>
  </grid-item>
  <grid-item>
    <a href="https://static.boredpanda.com/blog/wp-content/uploads/2018/05/emilia-clarke-making-stock-photos-8-5b0801cd0f33d__700.jpg">
      <img src="https://static.boredpanda.com/blog/wp-content/uploads/2018/05/emilia-clarke-making-stock-photos-8-5b0801cd0f33d__700.jpg">
    </a>
  </grid-item>
  <grid-item>
    <a href="https://www.atomix.com.au/media/2017/07/StockPhotoBanner.jpg">
      <img src="https://www.atomix.com.au/media/2017/07/StockPhotoBanner.jpg">
    </a>
  </grid-item>
</grid-container>

这使得输出看起来像:

而@Michael_B 解决方案:

grid-container {
  display: grid;
  grid-auto-rows: 50px;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
  font-weight: bold;
  color: white;
}

img {
  width: 200px;
}

<grid-container>
  <grid-item>
    <a href="https://g.foolcdn.com/image/?url=https%3A%2F%2Fg.foolcdn.com%2Feditorial%2Fimages%2F492452%2Fgettyimages-1014028076.jpg&w=700&op=resize">
      <img src="https://g.foolcdn.com/image/?url=https%3A%2F%2Fg.foolcdn.com%2Feditorial%2Fimages%2F492452%2Fgettyimages-1014028076.jpg&w=700&op=resize">
    </a>
  </grid-item>
  <grid-item>
    <a href="https://image.jimcdn.com/app/cms/image/transf/none/path/sa716b1500dd60f05/image/ic839a74ed6a8a054/version/1519833130/image.jpg">
      <img src="https://image.jimcdn.com/app/cms/image/transf/none/path/sa716b1500dd60f05/image/ic839a74ed6a8a054/version/1519833130/image.jpg">
    </a>
  </grid-item>
  <grid-item>
    <a href="https://c8.alamy.com/comp/AXBEXR/stock-photograph-of-a-asian-teen-with-a-trumpet-to-her-ear-AXBEXR.jpg">
      <img src="https://c8.alamy.com/comp/AXBEXR/stock-photograph-of-a-asian-teen-with-a-trumpet-to-her-ear-AXBEXR.jpg">
    </a>
  </grid-item>
  <grid-item>
    <a href="https://thumbs.dreamstime.com/z/cyber-woman-orange-11363555.jpg">
      <img src="https://thumbs.dreamstime.com/z/cyber-woman-orange-11363555.jpg">
    </a>
  </grid-item>
  <grid-item>
    <a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThObqAcFeb4byMcwLVkU1JVMYonpavYmEukk9r3rqF2oBTnd1q">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThObqAcFeb4byMcwLVkU1JVMYonpavYmEukk9r3rqF2oBTnd1q">
    </a>
  </grid-item>
  <grid-item>
    <a href="https://www.demilked.com/magazine/wp-content/uploads/2018/03/5aaa1cce4180b-funny-weird-wtf-stock-photos-57-5a3bb7ba3c266__700.jpg">
      <img src="https://www.demilked.com/magazine/wp-content/uploads/2018/03/5aaa1cce4180b-funny-weird-wtf-stock-photos-57-5a3bb7ba3c266__700.jpg">
    </a>
  </grid-item>
  <grid-item>
    <a href="https://static.boredpanda.com/blog/wp-content/uploads/2018/05/emilia-clarke-making-stock-photos-5-5b0801c7504b2__700.jpg">
      <img src="https://static.boredpanda.com/blog/wp-content/uploads/2018/05/emilia-clarke-making-stock-photos-5-5b0801c7504b2__700.jpg">
    </a>
  </grid-item>
  <grid-item>
    <a href="https://static.boredpanda.com/blog/wp-content/uploads/2018/05/emilia-clarke-making-stock-photos-8-5b0801cd0f33d__700.jpg">
      <img src="https://static.boredpanda.com/blog/wp-content/uploads/2018/05/emilia-clarke-making-stock-photos-8-5b0801cd0f33d__700.jpg">
    </a>
  </grid-item>
  <grid-item>
    <a href="https://www.atomix.com.au/media/2017/07/StockPhotoBanner.jpg">
      <img src="https://www.atomix.com.au/media/2017/07/StockPhotoBanner.jpg">
    </a>
  </grid-item>
</grid-container>

好多了但是会导致图片高度重叠:

最佳答案

我的建议是设置一些“跨度”类并将图像/砌体元素的高度限制为最小单位的倍数。这种方法只允许 CSS 砌体，但我们需要事先知道最小单元项的倍数(例如，在呈现 HTML 时)，以便我们可以应用这些跨度类，它们看起来像这样:

.grid-span-2 {
  grid-row-end: span 2;
}
.grid-span-3 {
  grid-row-end: span 3;
}
.grid-span-4 {
  grid-row-end: span 4;
}
...

如果这不可能，下一个最佳方法是使用一点 JS 来根据元素高度动态计算行跨度。下面的代码片段应该给出了如何处理这个问题的想法。

最重要的部分如下:

    const sizeItems = () => {
        // only trigger DOM repaint when necessary
        if ( $('.grid-container')[0].style.gridAutoRows !== '1px' ) {
            $('.grid-container')[0].style.gridAutoRows = '1px';
        }

        $('.grid-item > *').forEach(el => {
            const height = Math.floor(el.getBoundingClientRect().height);
            // only trigger DOM repaint when necessary
            if ( el.parentElement.style.gridRowEnd !== `span ${height}` ) {
                el.parentElement.style.gridRowEnd = `span ${height}`;
            }
        });
    }

我们需要等待图像加载完毕才能执行此操作，并在调整视口(viewport)大小时再次执行此操作，这基本上是 JS 代码的其余部分。

我们在这里做的是获取网格项中内容的真实/真实高度。我更喜欢在每个网格项中使用包装元素并使用它来测量.为什么？

a) grid-module 中的某些属性可能会在您看不到的情况下混淆 grid-item 的实际高度，然后可能导致不正确的高度计算。

b) 使用这种方法我们不能使用网格间隙(因为在这种极端情况下我们正在制作 1px 行以获得最精确的尺寸)因为它会弄乱单元格高度，所以仍然能够有一个间隙，我们也可以使用这个包装器 div 并对其应用填充以模仿网格间隙。

对于 JS 方法，我们设置了 grid-auto-rows: 1px;，这在元素高度方面为我们提供了最大的灵 active ，因为基本上每个网格单元格都可以调整大小以适合其内容确切地说，请注意虽然可能存在一些 1px 的小故障，但很可能是由于子像素渲染...

// micro DOM helper, just for convenience
const $ = window.$ = function(a,b){return Array.prototype.slice.call(document.querySelectorAll(a, b));};

const sizeItems = () => {
	// only trigger DOM repaint when necessary
	if ( $('.grid-container')[0].style.gridAutoRows !== '1px' ) {
		$('.grid-container')[0].style.gridAutoRows = '1px';
	}
	
	$('.grid-item > *').forEach(el => {
		const height = Math.floor(el.getBoundingClientRect().height);
		// only trigger DOM repaint when necessary
		if ( el.parentElement.style.gridRowEnd !== `span ${height}` ) {
			el.parentElement.style.gridRowEnd = `span ${height}`;
		}
	});
}

Promise.all($('img').map(img => { 
	return new Promise(resolve => {
		img.onload = () => {
			resolve();
		}
		img.onerror = () => {
			resolve();
		}
	});
})).then(() => {
	const emit = new Event('images');
	window.dispatchEvent(emit);
});

window.addEventListener('images', function(e) {
	console.log('onImagesLoaded');
	sizeItems();
});

window.addEventListener('load', function(e) {
	console.log('onLoad');
	sizeItems();
});

window.addEventListener('resize', function(e) {
	console.log('onResize');
	sizeItems();
});

* {
  box-sizing: border-box;
  margin: 0;
}
body {
  font-family: sans-serif;
}

.grid-container {
  background: gold;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(100%/3), 1fr));
  grid-gap: 0; /* can't use grid gap! */
  /* grid-auto-rows: auto; */
  grid-auto-flow: dense;
  /* if you don't want a gap on the outside of the grid when working with padding */
  /* margin: -4px; */
}
@media screen and (max-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
  }
}
@media screen and (max-width: 400px) {
  .grid-container {
    display: block;
  }
}

.grid-item {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 1.3em;
  font-weight: bold;
  color: hsl(0,0%,14%);
}

.grid-gap {
  /* if you need a grid-gap, apply padding to a wrapper element INSIDE the grid-item */
  /* padding: 4px; */
  overflow: hidden;
  width: 100%;
}

.grid-item a,
.grid-item img {
  display: block;
  width: 100%; height: 100%;
}

.grid-item figcaption {
  background: lightcoral;
  color: white;
  font-size: 14px;
  font-style: italic;
  padding: 4px 0;
  text-align: center;
}

<div class="grid-container">
	<div class="grid-item">
		<div class="grid-gap">
			<figure>
				<a href="https://via.placeholder.com/397x625">
					<img src="https://via.placeholder.com/397x625/255a60/FFFFFF" />
				</a>
				<figcaption>This is a caption!</figcaption>
			</figure>
		</div>
	</div>
	<div class="grid-item">
		<div class="grid-gap">
			<a href="https://via.placeholder.com/678x765">
				<img src="https://via.placeholder.com/678x765/4496a1/FFFFFF" />
			</a>
		</div>
	</div>
	<div class="grid-item">
		<div class="grid-gap">
			<a href="https://via.placeholder.com/567x987">
				<img src="https://via.placeholder.com/567x987/eaf8ab/FFFFFF" />
			</a>
		</div>
	</div>
	<div class="grid-item">
		<div class="grid-gap">
			<a href="https://via.placeholder.com/968x956">
				<img src="https://via.placeholder.com/968x956/ccd47e/FFFFFF" />
			</a>	
		</div>
	</div>
	<div class="grid-item">
		<div class="grid-gap">
			<a href="https://via.placeholder.com/987x687">
				<img src="https://via.placeholder.com/987x687/255a60/FFFFFF" />
			</a>
		</div>
	</div>
	<div class="grid-item">
		<div class="grid-gap">
			<a href="https://via.placeholder.com/620x345">
				<img src="https://via.placeholder.com/620x345/255a60/FFFFFF" />
			</a>
		</div>
	</div>
	<div class="grid-item">
		<div class="grid-gap">
			<a href="https://via.placeholder.com/543x789">
				<img src="https://via.placeholder.com/543x789/4496a1/FFFFFF" />
			</a>
		</div>
	</div>
	<div class="grid-item">
		<div class="grid-gap">
			<a href="https://via.placeholder.com/376x274">
				<img src="https://via.placeholder.com/376x274/eaf8ab/FFFFFF" />
			</a>
		</div>
	</div>
	<div class="grid-item">
		<div class="grid-gap">
			<a href="https://via.placeholder.com/468x623">
				<img src="https://via.placeholder.com/468x623/9fb828/FFFFFF" />
			</a>	
		</div>
	</div>
</div>

关于css - 如何实现连续且没有间隙的响应式砌体式布局？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57246282/

文章推荐： c - 反转数组(不使用第二个数组)

文章推荐： python - 在 Pyramid .ini 文件中配置不同的电子邮件后端

Jquery检查元素是否隐藏(连续)
如何检查一个元素是否立即隐藏。即如何通知元素的可见性。在我的例子中，该元素是通过 slideUp 函数隐藏的。我应该立即收到有关该元素的可见性的通知。我想到了使用bind()方法。但它没有类似 o
连续 if 语句流程
if (srcbloc == NULL) { fprintf(stderr, "warning!: memrip source is null!\n"); exit(1); } if
SQL - 连续 "ON"语句
当我在数据库的旧 View 中清理一些问题时，我遇到了这个“奇怪”的连接条件: from tblEmails [e] join tblPersonEmails [pe]
css - 如何水平对齐多个图像(连续)？
如何水平对齐多张图像，一张一张地？它们不必适合宽度屏幕:相反，我希望它们超过后者的宽度，如果这有任何意义的话。我已经检查了很多类似问题的答案，但找不到任何可以解决我的问题的答案。 HTML:
Cassandra ttl 连续
我知道 Cassandra 中的列有 TTL。但是也可以在一行上设置 TTL 吗？在每列上设置 TTL 并不能解决我的问题，如下面的用例所示: 在某些时候，一个进程想要删除一个带有 TTL 的完整行(
macos - 连续 NSTextField
我有一个 NSTextField 和 Label，其值绑定(bind)到 View Controller 中的相同 NSString 这里的问题是标签只有在我按 Tab 时才会更新。如何使其连续，以
javascript - 在字符串中插入下划线代替单个或多个空格(连续)
例如。 1."abc"; ===>abc 2."ab c"; ===>ab_c 3."ab c"; ===>ab_c 4."ab c" ===>ab_c 对于多个连续空格也是如此。我怎样
javascript - 如何获取前一天(连续)
大家好，我想获取前一天或最后一天的信息，只有当我按下按钮时，它才会显示最后一天(星期六)的所有信息，如果我再次单击按钮，它将显示最后一天的信息(星期五)如果我再次点击它(星期四)谢谢你们帮助我编辑:
audio - 使用mplayer从音频流中提取冰冷的元数据(连续)
我需要从实时音频流中提取ICY元数据，并正在使用mplayer进行此操作，因为它在播放音频流时会输出元数据。我欢迎其他方式执行此操作，目标是将更新的元数据(歌曲信息)保存到文本文件中，只要歌曲(或数据
web - (连续)网络浏览器中有限单词的语音识别
语音识别有没有解决方案只有几个字(2 个就够了，10 个就不错了。100 个就很棒了。不需要更多) 也在移动浏览器上运行(是否可以为此使用 flash(而不是 java)？) 可以安装在您自己的服务
Python条件连接不以标点符号结尾的*连续*字符串
我有一个单词列表， list1 = ['hello', 'how', 'are', 'you?', 'i', 'am', 'fine', 'thanks.', 'great!'] 我想加入， list
连续 "undefined reference to..."
我正在开发一个程序，但我不断收到“对‘dosell’的 undefined reference ”，我不太明白发生了什么。这是函数的声明: void dosell(int *cash, int *nu
MYSQL - 连接三个表(连续？)
我无法提出执行我要做的事情所需的查询。我有三个这样的表: client_files ----------------------- client_id file_id ---------
javascript - 连续/无限滚动
我一直在寻找一个插件/脚本，当到达底部时，它会从头开始继续滚动网站，就像一个连续的循环。示例:http://unfold.no/和 http://www.aquiesdonde.com.ar/ 我尝
连续 scanf 正在添加字符串
这个问题在这里已经有了答案: How to prevent scanf causing a buffer overflow in C? (6 个答案) 关闭 6 年前。我一直在使用一个非常简单的程
c++ - 子数组中两个数字的相同出现(连续)
给定一个整数数组，找到具有相同数量的 x 和 y 的连续子序列的总数。例如 x=1 和 y=2 的数组 [1,2,1] ans = 2 表示它的两个子数组 [1,2] 和 [2,1]。检查每个连续的子
arrays - 查找总和小于给定值的最大元素(连续)？
所以，我有一个所有正自然数的数组。我得到了一个阈值。我必须找出总和小于给定阈值的数字(连续)的最大计数。 For example, IP: arr = {3,1,2,1} Threshold = 5
java - 如何像内置相机一样实现Android相机对焦(连续)
我制作了像内置相机一样的相机应用。我想实现像内置相机一样的连续对焦功能。(此功能我不触摸屏幕，但相机会尝试自行对焦。) 因此，将其设置为 surfaceCreated : Camera.Pa
r - 连续 block 上的平均
我有这样的数据: f x A 1.1 A 2.2 A 3.3 B 3.5 B 3.7 B 3.9 B 4.1 B 4.5 A 5.1 A 5.2 C 5.4 C 5.5 C 6.1 B 6.2 B
sql - 连续 n 分钟超过阈值
假设我有一个包含一组数据点的表，每个数据点由一个时间戳和一个值组成。如果至少有 N 个连续记录(按时间戳排序)高于给定值 X，我将如何编写返回 true (1) 的查询，否则返回 false (0)？

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 如何实现连续且没有间隙的响应式砌体式布局？