程序员经验分享-hwhale

Pinterest 样式布局与 CSS，但水平堆叠而不是垂直堆叠[重复]

2023-12-04

我正在尝试创建一个 pinterest 样式布局，而不使用 Packery 或任何 JS。我尝试过使用 CSS3 列，但它们垂直堆叠。

看到这里的小提琴，https://jsfiddle.net/2otpzbgt/1/

column-count: 3;

是我用过的，卡片显示为 1、6、11 等。可以显示为1、2、3吗？

我试图解决的目的是具有动态内容的网格布局，其中图像大小（高度）会变化（类似于 pinterest），但只有事先知道图像的高度，packery 才能进行安排。当您滚动时，我会懒惰地加载图像和获取卡片。

Thanks!


删除column-fill: auto;你的问题已经解决了

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

css

Masonry

packery

Pinterest 样式布局与 CSS，但水平堆叠而不是垂直堆叠[重复] 的相关文章

  • 设置双指缩放时精确的滚动位置

    我正在创建一个地图应用程序 它将标记图像放置在画布上并滚动到它 我正在使用浏览器的捏缩放和滚动来放大 缩小地图 然而 我注意到有一些奇怪的行为 我想知道如何解决它 这有点难以解释 但我们开始吧 假设您处于网页的标准缩放级别 无法进一步缩小

  • jQuery输入文件点击方法和IE上拒绝访问

    我尝试仅使用一个按钮作为输入文件 它在 Firefox Chrome Safari 中工作正常 但在 IE 中不行 提交表单时我总是收到 访问被拒绝 的消息 代码 input file click 有真正的解决方法吗 我在谷歌上浪费了大约2

  • 嵌套计算操作

    希望这很简单 我想使用CSS calc操作来执行两个计算 我想将宽度设置为等于 100 7 2 但是 如果我尝试在 CSS 计算操作中执行多个操作 则会失败 width calc 100 7 2 如何在一个 CSS 语句中执行多个计算操作

  • 将按钮文本放在一行上

    我的按钮文本在 safari 中显示在一行上 即使在初次单击后 但是在 google chrome 上 当您第一次到达该按 钮时 我的按钮将显示在一行上 但是当您浏览更多帖子并再次遇到 加载更多 按钮时 文本搞砸了 这只发生在谷歌浏览器上

  • JavaScript 将键添加到数组中的每个值

    我下面有这个数组 它由一个简单的数组组成 我想要完成的是放一把钥匙id在每个数组值前面以实现类似的效果 id a id b id c id d 有没有一种简单的方法可以做到这一点 任何帮助将不胜感激 谢谢 var test a b c d

  • 全局传递 xhr onload 函数的值

    在我正在创建的应用程序中 我有以下 XMLHttpRequest 并且我正在尝试传递结果data在 的里面xhr onload 到在同一父函数中创建的数组中 var url http api soundcloud com resolve j

  • 为什么在 JavaScript 中 if([]) 被验证而 [] == false ？

    if false alert empty array is false alert alert 0 if alert empty array is true 他们都会运行警报 Demo http jsfiddle net roine ZFD

  • 如何将 arraylist 从 servlet 传递到 javascript？

    我通过在属性中设置数组列表并将其转发到 jsp 来从 servlet 传递数组列表 Servlet ArrayList

  • 如何使用 window.onerror 捕获所有 javascript 错误？ （包括道场）

    这个问题是后续问题javascript 如何在弹出警报中显示脚本错误 https stackoverflow com questions 2604976 javascript how to display script errors in

  • 模板中带有 ng-if 的 angularjs 指令

    我正在构建一个在模板内使用 ng if 的指令 奇怪的是 提供给链接函数的元素没有扩展ng if代码 它只是ng if的注释行 经过一番尝试 我发现通过将链接代码包装在 timeout 中似乎可以使其正常工作 但我想知道这是否不是正确的处理

  • Web组件中嵌套槽的内容不可见

    我有一个 Web 组件 它应该接受任意元素来包装其内容 虽然我可以在 Chrome 开发工具中看到插槽已正确分配 但 DOM 中什么也没有出现 以前有人见过这个问题吗 定义 class ExampleParent extends HTMLE

  • 如何删除标题中的粗体？

    我有一个标题 h1 THIS IS A HEADLINE h1 如何使短语 THIS IS 不加粗 其余部分不做任何更改 我在文本装饰中找不到任何相关标签 标题看起来很粗体 因为它大尺寸 如果您已应用粗体或想要更改行为 您可以执行以下操作

  • 如何为我的整个 Node.js 应用程序使用相同的 MySQL 连接？

    我有一个app js 我从那里运行我的整个应用程序 在 app js 内部 我require许多文件中都有代码 对于每个文件 我都这样做 var mysql require mysql var mclient mysql createCon

  • 如何在 webpack 中渲染嵌套的 SASS？

    采取以下CSS MyComponent color blue Button color red 以及以下 React 组件 import React from react import classes from MyComponent sc

  • 我可以使用 ASP.NET WebForms 母版页在每个内容页中包含不同的 javascript/css 文件吗？

    我有几个使用相同母版页的内容页 它们并不都需要包含在相同的 javascript 和 css 文件中 tag 是否可以更改内容来自内容页面的标签 确实如此 但我建议采取一些不同的做法 我在关闭正文标签的正上方放置了一个内容占位符 然后我填充

  • 尝试使用 Javascript 解决对称差异

    我正在尝试找出对称的解决方案 使用 javascript 完成以下任务的差异 目标 接受未指定数量的数组作为参数 保留数组中数字的原始顺序 不删除单个数组中数字的重复项 删除数组中出现的重复项 因此 例如 如果输入是 1 1 2 6 2 3

  • 使用 ref 触发反应 dropzone 不起作用

    我正在实现这个库 https github com felixrieseberg React Dropzone Component https github com felixrieseberg React Dropzone Compone

  • 如何垂直对齐div内的图像

    如何在包含的内容中对齐图像div Example 在我的示例中 我需要将 img in the div with class frame div class frame style height 25px img src http jsfi

  • Chrome 扩展：强制 popup.html 关闭

    我想知道是否可以强制 popup html 关闭 在弹出的 javascript 中 window close

  • 将多维数组转换为单数组（Javascript）

    我有一个对象数组 来自 XLSX js 解析器 因此其长度和内容各不相同 表示已给予项目的资助 简化后 它看起来像这样 var grants id p 1 location loc 1 type A funds 5000 id p 2 lo

随机推荐

  • 如果 Term 达到某个点，Kusto row_cumsum 会修改 Term

    我有一份按以下顺序排列的员工姓名和工资列表 我需要按以下格式创建输出表 即 每当累计工资总额超过 3000 时 我必须检测到这一点并标记该行 我尝试过 row cumsum 并重置Term一旦超过 3000 但第二次迭代就不起作用了 dat

  • CSS 使用 Flexbox 对齐两侧的几个项目 [重复]

    这个问题在这里已经有答案了 我试图使用 css flexbox 在两侧做一些项目 但不知何故我无法将它们 div 并排粘贴 PS 我无法设置元素数量 因为我希望它灵活 因为我可以添加或删除 并且它不会影响我的CSS 我希望它是这样的 图片样

  • 有条件合并列表元素

    我想根据某些表达式有条件地合并列表中彼此跟随的元素 一个更好地解释我想做的事情的例子 from val list List a1 a2 b1 b2 b3 a3 a4 我想将以 b 开头的所有元素合并到单个元素中以获得如下结果列表 List

  • FormData 为空有问题吗？

    我似乎对 FormData 为空有疑问 我正在尝试在单个 POST 请求中上传文件和 JSON 我尝试了各种各样的方法 但似乎没有任何效果 我想知道我是否在这里弄乱了一些基本的东西 但我似乎找不到任何东西 非常感谢您的帮助

  • 使用变换函数添加变量，同时忽略 NA

    我有一个包含大量变量的数据框 我通过将一些旧变量添加在一起来创建新变量 我用来执行此操作的代码是 name of data frame lt transform name of data frame new variable var1 va

  • 对构造函数的调用不能出现在常量表达式中

    我很抱歉我的新手问题 但我对 C 不太了解 任何人都可以回答为什么我在编译以下代码时收到错误 错误 对构造函数的调用不能出现在常量表达式中 class EliminationWeight public typedef double Type

  • WMI 查询脚本作为作业

    我有两个脚本 一个以服务器列表作为参数来调用另一个 第二个查询旨在执行 WMI 查询 当我手动运行它时 它完美地完成了这一点 当我尝试将其作为一项作业运行时 它会永远挂起 我必须将其删除 为了节省空间 这里是调用脚本的相关部分 进程服务器

  • MVC3 HTMLHelper 默认值

    我有一个 html 助手 我想将其设置为默认值 Html EditorFor model gt model DateFrom 如果 model DateFrom 为 null 设置助手默认值的语法是什么 我认为使用 EditorFor 不能

  • Golang 映射对于并发读/写操作有多安全？

    根据 Go 博客 地图对于并发使用并不安全 它没有定义当您同时读取和写入它们时会发生什么 如果您需要从并发执行的 goroutine 中读取和写入映射 则必须通过某种同步机制来协调访问 来源 https blog golang org go

  • Java：Cipher包（加密和解密）。无效密钥错误

    我正在使用静态方法创建一个类 以使用 javax crypto 加密和解密消息 我有两个静态方法 它们使用 ecipher 和 dcipher 来完成它们应该做的事情 我需要初始化一些变量 它们也是静态的 但是当我尝试使用它时 我得到 In

  • 银行场景的关系代数

    我不知道如何解决关系代数问题 Deposit Branch Acc No Cust Name Balance Loan Branch Loan No Cust Name Balance Branch Branch Assets Branch

  • 基本构造函数必须具有相同的返回类型

    我想将 jsx 重写为 tsx 我有一个从react bootstrap方法重写方法的代码 import Panel from react bootstrap class CustomPanel extends Panel construc

  • C++11 - 无法使用 constexpr 函数定义 constexpr 文字吗？

    我遇到了一个看似违反直觉的错误 即无法分配 a 的值constexpr函数为constexpr字面意思 希望我使用的语言是正确的 这是例子 class MyClass public static constexpr int FooValue

  • 如何设置按键绑定？

    此应用程序的箭头键需要引起独立于焦点的按下和释放事件 设置 onKeyRelease true 会按预期导致释放事件 但设置 onKeyRelease false 下面的代码 似乎不会停止自动重复 有没有办法实现按键绑定在按住方向键时触发一

  • 如何使用 VBA 以编程方式添加引用

    我编写了一个程序 该程序运行并在完成时向 Skype 发送信息 我需要添加参考Skype4COM dll以便通过 Skype 发送消息 我们在网络上有十几台计算机和一个共享文件服务器 除其他外 所有其他计算机都需要能够运行该程序 我希望避免

  • 从 Javascript 调用 Azure 函数

    我有一个简单的 HTML 页面 其中有一个文本框和一个提交按钮 我有一个 Azure 函数 当点击时 它会接收文本框的内容 我们应该将其发送到 Azure 函数并发送邮件 代码是用 C 在 Azure 函数中编写的 我做了什么 我获取了文本

  • git pull - 默认情况下它会在远程获取标签吗？

    I know git fetch tags将从远程获取所有标签到本地 我不确定会git pull默认从远程获取标签 那么会不会呢 默认情况下 git pull 将仅获取所获取的对象可访问的标签 来自git pull文档 无标签 默认情况下

  • 执行 Google Prediction API 命令行示例时出错

    我已经下载了预测 api 的示例命令行程序并导入到 eclipse 中 如前所述here 我已导入该示例程序 并将 client secrets json 的内容替换为我从 api 控制台下载的文件值 如上面的链接所述 我已经使用构建了模型

  • 带有通配符的列表会导致通用巫术错误

    有谁知道为什么下面的代码不能编译 add 和 addAll 都不能按预期工作 删除 扩展 部分使一切正常 但随后我将无法添加 Foo 的子类 List

  • Pinterest 样式布局与 CSS，但水平堆叠而不是垂直堆叠[重复]

    这个问题在这里已经有答案了 我正在尝试创建一个 pinterest 样式布局 而不使用 Packery 或任何 JS 我尝试过使用 CSS3 列 但它们垂直堆叠 看到这里的小提琴 https jsfiddle net 2otpzbgt 1

热门标签