masonry相关内容

带有折叠容器的引导网格

这是我在这里的第一个问题,希望您能帮助我.我正在尝试使用引导网格设置产品概述页面.我连续有 4 个产品用于大屏幕尺寸.对于较小的屏幕尺寸,我希望每行有 2 个产品. 诀窍是,我希望将产品详细信息放在行之间的折叠容器中,当我单击产品时,该容器会打开.它适用于具有 4 种产品的大屏幕尺寸.但是如何实现折叠的容器在我点击我的产品的行之后立即显示,与我每行有多少产品无关.在较小的尺寸上,折叠的容器在 ..

仅使用 flexbox CSS 的水平砌体布局

我正在尝试仅使用 CSS 和 flexbox 创建水平砌体布局.我遇到的问题是元素之间存在垂直间隙,不使用 align-left:stretch; 是否可以关闭间隙? .card-container {显示:弹性;弹性方向:行;flex-wrap: 包裹;对齐项目:flex-start;}.卡片 {宽度:25%;弹性:1 0 自动;} 这里是完整的代码笔 解决方案 这里有一个使用包裹列 ..
发布时间:2021-12-24 23:22:06 前端开发

不同尺寸卡片的 Bootstrap 5 布局——比如 Pinterest

我正在构建一个使用 Bootstrap 5 的网络,该网络将有一个部分显示几张这样的卡片 如您所见,每张卡片可能有不同的尺寸(取决于描述和缩略图) 如何使它们紧凑,就像 Pinterest 主页一样 我需要使用什么类(在引导程序 5 中),或者什么布局 解决方案 As 解释在 Bootstrap 5 文档中,Masonry JS 插件是此类“Pinterest"的推荐选项 ..
发布时间:2021-09-11 18:51:26 前端开发

使用 React Native 的 Masonry/Pinterest 列

有没有办法在 React Native 中使用 flexbox 来实现 Masonry/Pinterest 风格的栏目? 解决方案 在 React Native 中,远程图像不会在加载时调整大小(请参阅“为什么不自动调整所有内容的大小").这似乎限制了为此使用 flexbox,因为默认情况下远程图像的大小为 0x0,并且如果您设置宽度或高度,它们不会保持纵横比,就像在网络上一样. 幸 ..
发布时间:2021-07-04 19:02:53 其他开发

如何将 Bootstrap5 的 Masonry 正确加载到 Nuxt 中?

我正在尝试在 Bootstrap5 和 NuxtJS 中使用 Masonry 插件.当我按照这里的示例进行操作时https://getbootstrap.com/docs/5.0/examples/masonry/ 和将它合并到我自己的 codesandbox 中,我注意到我的演示不在正确的砌体格式.看到缝隙了吗?我的沙箱 我的例子: 引导程序示例: 我需要做什么才能使我的演示变 ..
发布时间:2021-06-11 18:47:57 其他开发

reactjs和砌体布局-未定义

我已经在砌体布局上完成了npm安装-但是当我渲染此组件时,它会出现一个元素未定义的错误?“无法设置未定义的属性'element'" 这是一个jsfiddle http://jsfiddle.net/0ht35rpb/82/ 我是reactjs的新手,我正在尝试使砌体布局网格正常工作. https://masonry.desandro.com/#package-managers ..
发布时间:2021-05-19 18:52:23 前端开发

CSS列计数导致项目拆分列

尝试不使用jQuery脚本来实现砌筑效果,因此请使用CSS作为替代方案. 我正在尝试使用列计数,该列似乎正在运行,但未达到预期的水平. 所以这些列在那里,但是有时您会在此示例中看到,容器中的项目有时会被拆分成多个: http://jsfiddle.net/DTcHh/3858/ #builds {宽度:100%;}.cols {-moz-column-count:4;-moz ..
发布时间:2021-04-26 19:48:42 前端开发

没有定义列的纯CSS砌体布局

我写了一个如上所述的布局.我使用宽度和高度不同的display: inline-block和article元素的简单用法实现了这一点,例如: width: 50%; /* this is variable*/ height: 160px; /* this is also variable*/ padding: 10px; box-sizing: border-box; display: i ..
发布时间:2020-11-08 20:17:24 前端开发

砌体为何排列成单列重叠

我正在使用附加函数将元素附加到已经初始化的砖石实例中,但是我的所有图块都被布置在单个列中,并且许多图块是重叠的.可以看到我在做什么错吗? function placeNewsTiles(news){ //places news tiles var length = (news.data.length > 20) ? 20 : news.data.length; var $ ..
发布时间:2020-07-24 03:33:22 前端开发

如何在砌筑之前加载脚本?

我对javascript还是很陌生,所以如果对它的描述太过恐怖,请忍受...我敢肯定,如果有人可以花时间为我检查这段代码,那么有一个简单的解决方案: http://nang-nang.net/masonry/index.html ^我的测试站点 我正在尝试使用石工,但未加载的图像导致元素重叠.我尝试过提供一个名为ImagesLoaded的解决方案(在“砌体"附录中),但无法使其正 ..
发布时间:2020-07-23 06:49:44 前端开发

同位素-尝试按原始顺序对项目进行排序

我是在stackoverflow上发帖的新手,并且还在使用Codepen.所以请和我一起温柔! 在找到戴维·德桑德罗(David DeSandro)的绝妙石工之后,我又发现了奇异的同位素.我一直在尝试完成(我认为)维护项目原始顺序这一非常简单的任务.将我的头发拉了好几天(还尝试了Vit的"tasuki" Brunner的砌体命令)-我的语法显然有问题,请帮忙. 基本上,我有很多页面,每 ..
发布时间:2020-07-21 05:41:15 其他开发

重装砌体内容

当元素的高度更改时,我正在尝试更新砌体页面的布局.我希望元素自动调整大小,就像调整窗口大小一样.我已经尝试了许多方法,但是现在似乎什么也没做: function masonryReload() { jQuery('#container').masonry('reloadItems'); } 我在这里缺少什么吗?还是还有另一种更适合我 ..
发布时间:2020-07-08 06:29:00 其他开发

实体化中的砌体

我想知道是否有任何方法可以在类似砖石结构的显示器中放置实体化卡.我想避免使用砖石之类的插件,也不必编译sass,因为它将用于aurelia应用程序,并且外部库的配置等使我非常痛苦. 我遇到的最接近的东西是: http://codepen. io/mike-north/pen/MwVoYp?editors = 1100 ,它通过以下方式实现: .cards-container { c ..
发布时间:2020-05-06 10:04:04 前端开发

jQuery无限滚动/图像加载两次

我有一个带有jQuery无限滚动和砌体的图片库.我在一页上显示20张图像.分页看起来像: ../gallery/toprated.php?start=20 (page2) ../gallery/toprated.php?start=40 (page3) 等 当我通过单击分页打开每页时,它将为每页加载20张图像. 婴儿滚动的“下一个" href如下: ..
发布时间:2019-11-18 11:07:54 PHP

砌体重叠(Imbalance2错误)

我使用Wordpress.org构建了我的网站,主题名为Imbalance2.我注意到该主题存在一个错误,由于Masonry js,我搜索了有关重叠问题的主题.我使用的是 imagesLoaded (来自使用砖石结构并加载了图像的用户 ,谢谢!):可以,但有时我的Chrome仍然重叠.我决定添加分页而不是“延迟加载"(以避免出现更多问题……),但我无法合并#boxes和#related…的 ima ..
发布时间:2019-11-18 09:30:19 前端开发