- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
如何实现与 Pintrest 具有相似属性的布局?
具体来说:
[(100,400), (100,100), (100,400), (100,100), (100,400), (100,100)]
,列的高度将大致相同,而不是左侧的 1200
和右侧的 400
。下面的屏幕截图说明了这一点。第三个要点的示例:深色淋浴图片位于悬挂座椅图片下方,而不是外部房屋图片下方。这是因为吊座图的高度较小。
类似地,当布局为两列宽时:卧室的图片位于扶手椅下方,因为悬挂的座椅图片高度较小。
虽然这篇文章看起来类似于 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/
不确定是间隙还是音频样本未对齐,但是当我将音频文件一分为二时,如下所示: ffmpeg -ss 0 -t 00:00:15.00 -i song.mp3 seg1.mp3 和 ffmpeg -ss 0
我正在使用 NSDrawNinePartImage 绘制自定义按钮/文本字段。我在代码中将图像分割成九个部分,并使用 NSDrawNinePartImage 将其绘制到一个矩形中。 不幸的是,我在绘图
Check this image for the progressbar 知道如何消除 ProgressBar 下的那个小间隙吗?我怎样才能做到没有差距?应该通过 MainActivity 中的 ja
刚开始制作网站时,整个左侧都有几个像素的边距,但我不明白为什么。 http://jsbin.com/elufob/1/ 任何建议将不胜感激 CSS html{ min-width: 1
我一直在尝试在我的网站上使用静态图像,但页眉和图像之间存在很大差距,我尝试在 Photoshop 和 HTML 中删除填充并更改图像高度。这是我的问题的 fiddle https://jsfiddle
我前一段时间遇到过这个问题,忘记了解决方案是什么。我的文档顶部有一个小间隙,大概 5/10 像素? 我想你会知道我在说什么,我该如何摆脱它? 谢谢 最佳答案 在您的 CSS 文件中添加: html,
刚开始制作网站时,整个左侧都有几个像素的边距,但我不明白为什么。 http://jsbin.com/elufob/1/ 任何建议将不胜感激 CSS html{ min-width: 1
我正在尝试使用 Accordion MUI 组件在展开模式下不会移动,也不会对某些元素应用顶部和底部边距。 示例如下,但它不起作用,我的组件仍然太“跳跃”(扩展时它会增加宽度,并且添加了一些不可见的边
我有一个自定义 UITableViewCell Card 样式的动态高度,它的空间在应用程序中是恒定的。我正在使用 Storyboard ,并且在 UINavigationBar 下方有 UITool
假设您有一组日期范围 var arr = [ { "from": 'unix 1st of august', "until": 'unix 5th of august' },
我是radial-gradient的新手,我不知道这些多维数据集之间的背线或空格是什么?如何删除它们? * {margin: 0; outline: 0; border: 0;} .round {
我对 VBA 中的 HTML 正文有疑问。我创建了一封电子邮件并使用 HTML 填写信息。 我的问题描述如下: Reduce Gap between HTML and elements 但是我不能
我正在阅读 Lea Verou 的《CSS secret 》一书。 有一个圆 Angular 径向多重渐变的例子: http://dabblet.com/gist/24484257bc6cf7076a
我一直在为一个客户做一个元素,一切都很顺利,直到我注意到我的 h1/h2/h3(任何标题标签)已经向右移动了 2/3 像素。他们可能一直都在这样做,但我只是刚刚注意到。当您在 devtools 中突出
这里是 CSS 新手。奇怪的事情发生了,链接之间有间隙,我不知道为什么。 我正在使用 html html5 样板 css 进行重置。 HTML代码: Link 1 Link
这个问题在这里已经有了答案: margin on h1 element inside a div (3 个答案) 关闭 6 年前。 我有一个问题,我的 h1 标签与我的页面顶部分开 - 像这样:en
我希望我的文本在事件时带有下划线,但当我这样做时它看起来像这样: 我只希望文本有下划线,如果我使用 text-decoration:underline 它会在单词下划线,但我不知道如何在文本和下划线之
我似乎无法将这两张图片放在一起。它们都在 HTML 表格中自己的行中(我正在制作一封 html 电子邮件),但我似乎无法删除它们之间的 5px。 这是我的代码 它也在 jsfi
我正在尝试在我的项目中使用新的 CardView UI 小部件,但在某些运行 android 2.3 的设备上,CardView 角之间存在间隙(见下文)。 这是在我的 xml 文件中:
我想了解并学习当我使用共享边框填充两个形状/路径时遇到的问题的解决方案,即在为所有形状调用填充后,仍然有一个微小的间隙存在于他们之间。 该代码片段展示了绘制所涉及的形状/路径的代码: ctx.begi
我是一名优秀的程序员,十分优秀!