jQuery Isotope — 居中且流畅/响应式

2024-06-03

我要问一个关于Isotope http://isotope.metafizzy.co/

它是一个很棒的 jQuery 插件。

我已经玩了一段时间了,但我对 javascript 的了解还不够,无法结合两种同位素技术,响应同位素 http://isotope.metafizzy.co/demos/fluid-responsive.html and 中心同位素 http://isotope.metafizzy.co/custom-layout-modes/centered-masonry.html.

我已经成功地使用了响应式 mod,它运行得很好,除了现在我需要将整个内容放在 div 中。居中布局模式和响应模式都没有记录,所以我在让它工作时遇到了一些麻烦。基本上,居中布局模式的说明是:

要使用此 mod,请复制演示页面源中找到的修订方法。

不幸的是,在查看源代码中发生了各种各样的 javascript 事情,而我没有足够的 javascript 经验来挑选它并将其与我已经工作的响应式脚本结合起来。

任何帮助将不胜感激。

一个包含我需要的工作示例的网站。 http://www.aarontolley.co.uk/

我正在尝试的网站。 http://test.davewhitley.com/not-wp/responsive_test/

我认为在 Firefox 中效果更好。


这是 David DeSandro 本人提供的一个例子:

http://jsfiddle.net/desandro/P6JGY/6/ http://jsfiddle.net/desandro/P6JGY/6/

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

jQuery Isotope — 居中且流畅/响应式 的相关文章

  • 如何防止标签在移动屏幕 Chart.js 上重叠

    我正在使用这个例子jsfiddle https jsfiddle net Trekels fec0v5kj 但是当我使用小屏幕时标签开始像这样重叠 我可以做什么来预防它 我想让它完全响应 我尝试改变长度和其他长宽比等 但没有成功 var c
  • 如何识别网站中的慢速设备?

    当为移动设备调整网页时 我总是依赖 CSS 媒体查询 最近我不再只担心屏幕尺寸 还担心许多移动设备的 javascript 引擎 一些依赖于窗口滚动或快速 DOM 转换序列的常见 javascript 效果在慢速设备上效果非常糟糕 有没有办
  • CSS 媒体查询不起作用[重复]

    这个问题在这里已经有答案了 我一直尝试在 CSS 文档中进行媒体查询 执行以下操作 media screen and max device width 480px css here 但当我在 iPhone 上测试时 它不起作用 我尝试过更改
  • 如何在 Twitter Bootstrap 中自定义响应列和输入字段?

    主要问题是如何自定义 bootstrap 响应式 css 我的代码部分有效 但我无法修复这种情况 这很难解释 所以为了更好地理解 我在屏幕截图上进行了可视化呈现 我发布了实际清理过的模板代码JSFIDDLE http jsfiddle ne
  • carouFredSel 响应高度

    我使用 carouFredSel 时遇到响应式旋转木马的高度问题 因为图像是响应式的 并且轮播也设置为响应式的 它仍然将图像的最大高度添加到 div 中 当我的图像宽度为 740 高度为 960 时 它将图像大小调整为响应宽度以适合屏幕 图
  • 在引导响应页面中如何将 div 居中

    我需要使用 bootstrap 将 div 放置在页面的中心来创建响应式页面 如下面提到的布局所示 Bootstrap 5 更新 使用弹性盒进行简单的垂直网格对齐 import url https cdnjs cloudflare com
  • 在所有设备上使用 jquery 垂直对齐?

    我发现在不更改其他元素布局的情况下垂直对齐页面上的某些元素是有问题的 这个问题在移动设备上更加严重 如此多的屏幕尺寸 分辨率 纵向 横向 var x window innerHeight myDiv height myDiv css mar
  • 如何处理触摸设备上的悬停效果

    我有以下代码 div img src http placehold it 350x150 div class link cont a href click here to see more info a div div div width
  • 在响应式设计中将顶部元素移动到底部的最佳方法是什么

    我有以下 HTML 格式 将给定元素放置在桌面上的顶部和移动设备上的底部 宽度 p I am on the top of desktop page and bottom of mobile page p 以响应式方式重新排序未知高度的元素最
  • 使用流体网格系统在引导程序上对齐输入

    我正在创建一个表单 要求用户输入他们的姓名和电子邮件地址 表单的第一行对于姓名的每个部分都有两个并排的输入 第二行对于电子邮件地址有一个输入 其宽度应与第一行组合的宽度相同 我正在尝试使用流体网格系统 但无法将第二行与第一行对齐
  • 响应式网格布局框架[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • div 全宽的响应式背景图像

    我正在尝试弄清楚如何在 div 全宽和响应式中制作背景图像 背景图像在页面的宽度上扩展 并且具有响应性 但图像的高度不是其完整高度 似乎它被某种方式切断了 我正在使用引导框架 我尝试这样做的原因是我想在图像上覆盖一些文本 我尝试了很多不同的
  • 如何动态/响应式更改 jQuery 日期选择器的月数

    我问这个问题是因为我在另一个问题中找不到答案 如果有请给我链接 我有一个 jQuery Datepicker 在其上设置参数 numberOfMonths 2 如果屏幕大小低于某个数字 例如 768px 我希望它为 1 我试过 window
  • CSS:响应式布局中的高度自动问题

    我在响应式布局中使用 jquery 延迟加载 并使用空白 gif 作为预览图像 为了使延迟加载工作 我必须通过属性设置图像的高度和宽度 预览图像未设置为正确的高度 因为 height auto 似乎是通过 src 而不是通过高度属性计算高度
  • Internet Explorer 10+ 媒体查询和响应断点

    我正在尝试将 IE10 特定媒体查询与最大宽度页面断点结合起来 我很确定它们可以组合 但不知道如何去做 这是原始的 IE10 唯一的 css 媒体查询 media all and ms high contrast none ms high
  • 监听浏览器宽度以进行响应式网页设计?

    我正在努力使我的网站适合移动设备 我想知道浏览器窗口的大小 以便当它比 728px 窄时我可以执行某些操作 而当它大于 728px 时我可以执行其他操作 这必须考虑到调整 PC 上的窗口大小以及在手机中从纵向模式更改为横向模式 如何才能做到
  • 移动设备和浏览器上屏幕方向不同的 javascript/jQuery 函数

    免责声明 我不是 javascript 或 jQuery 专家 这可能是一个很容易解决的问题 因为这只是我无法解决的一个小问题 我正在实现一个网站 如果浏览器处于横向模式 则该网站是水平的 如果浏览器处于纵向模式 则该网站是垂直的 CSS
  • zurb 基金会是否可以拥有完整的行宽度

    我正在使用 Foundation 3 构建响应式网站 但我想让页脚和导航背景宽度占据整个宽度 我将我的行命名为 class row navigation class row footer 我尝试寻找如何解决这个问题 但我没有选择 我假设这是
  • 如何在CSS中水平对齐div

    我在一个容器内有三个子 div 我想水平对齐这些 div 我尝试使用CSSfloat财产 但圆圈正在变成椭圆形 标记代码 div class container info box clearfix div class circle div
  • 删除移动设备上的 adsense

    我正在研究响应式设计 但在使用 adsense 时遇到了问题 我有一个广告应该显示在桌面设计上 但不能显示在移动设计上 因此 只有在桌面上查看网站时 才应将广告代码放置在 html 中 css 可以使用 display none 但这违反了

随机推荐

  • “单体”是什么意思?

    我在课堂上看到过它 我怀疑这意味着该类可以被分解为逻辑子单元 但我找不到一个好的定义 你能举一些例子吗 谢谢您的帮助 编辑 我喜欢聪明的回复 但我显然指的是软件上下文中的 整体 我了解巨石 巨石 支石墓以及所有与石头相关的背景 哎呀 我的国
  • 将 JS 库 xml2js 与 Angular 2 结合使用

    我正在尝试在 Angular 2 带有 TypeScript 的 RC 1 Web 应用程序中使用 xml2js 作为 XML 解析器 但是我只收到一些错误并且没有有效的解决方案 这是我一步一步所做的 通过安装 xml2jsnpm inst
  • 如何从investing.com 上抓取数据?

    我想从以下位置抓取 EUR USD 的 5 分钟技术摘要 https au investing com currencies eur usd https au investing com currencies eur usd 但我不知道该怎
  • 内联表值 UDF 能否优于 SELECT 列列表中的等效标量 UDF?

    这个问题源于SQLServer 为什么要避免表值用户定义函数 https stackoverflow com questions 1081057 sqlserver why avoid table valued user defined f
  • 使用服务主体连接 Azure SQL Server

    我想通过 Python 使用 Azure 服务主体连接 Azure SQL 数据库 请帮我 我可以使用服务主体通过 ADF 连接它 有一个图书馆Microsoft Azure Active Directory Authentication
  • C# 中的应用程序关闭事件

    我正在使用 NAudio 编写音乐播放器 在关闭播放器之前 我想调用一些停止播放的方法 我该怎么做呢 WinForms 订阅Application ApplicationExit http msdn microsoft com en us
  • UIAlertController 显示延迟

    我在我的应用程序上遇到了 UIAlertController 问题 现已迁移到 iOS8 其中包含日期选择器 下面是代码 UIAlertController AlertView UIAlertController alertControll
  • 我用 MediaRecorder 录制的文件无法播放

    我正在使用 MediaRecoder 录制声音 但录制完成后无法播放 我尝试使用Google Play Music ES Media Player 甚至将其上传到电脑并尝试使用Winamp打开它 没什么玩的了 AUDIO RECORDER
  • 无法在 Eclipse 中运行从 Git 导入的项目

    我的 Eclipse 工作区中有一个来自 Github 的项目 通过 File gt Import gt Projects from GIT 但是 我无法运行该示例 因为 运行方式 下的唯一选项是 运行配置 转到 运行配置 后 我单击 浏览
  • 使用 React JS 进行多个文件上传

    我试图弄清楚如何在 React JS 中循环多个文件上传 最终我希望能够循环遍历每个文件 以便我可以判断是否仅上传 PNG JPG 和 MP3 文件 我还希望 PNG JPG 文件限制为 5MB MP3 文件限制为 2MB 到目前为止 我不
  • 为什么 C# 中 bool 数据类型的大小不是只有 1 位?

    我刚刚学习 C 并深入研究数据类型 为什么不是一个bool数据类型大小为 1 位 看起来它只能保存两个值之一 true 或 false 那么这不是只占用 1 位空间来表示该值吗 是因为值的最小 可寻址 大小是一个字节 8 位 吗 这个帖子
  • MVC 5 中的“缓存配置文件”

    我是 MVC 的初学者 我有一个项目要从 MVC2 转换到最新版本的 MVC 我读了一些关于MVC 4的书 所以我开始了解主要机制 但是 在转换我的 MVC 2 解决方案时 我遇到了一个属性问题 OutputCache 例如 我有多个这样的
  • C++:在现实世界中添加和重新定义默认参数

    在 C 中可以添加或重新定义函数的默认参数 让我们看一下例子 void foo int a int b int c 1 std cout lt lt foo lt lt a lt lt lt lt b lt lt lt lt c lt lt
  • 有没有办法更改 UITabBar 或 UITabBarItem 中的文本位置?

    这是我打算放在屏幕上的自定义选项卡栏 然而 我的搭档希望文字稍微向上一些 我怎样才能这样做呢 为什么不为视图控制器设置一个空的标题属性 并将标题添加到选项卡的自定义图像中 UPDATE 为了回答的完整性 来自评论和ios标签栏在没有图像时将
  • 如何使用 jquery 检查输入 type="file" 是否有文件?

    我有一个文件上传控件
  • Some() 在变量赋值的左侧做什么?

    我正在阅读一些 Rust 代码 并且遇到了这一行 if let Some path env args nth 1 这个函数内部 fn main if let Some path env args nth 1 Try reading the
  • 如何在 Node.js 中获取 RSA 公钥的模数和指数

    我正在创建一个ACME https www rfc editor org rfc rfc8555客户端和我需要找到 RSA 公钥的模数和指数 我使用以下代码生成该公钥 crypto generateKeyPairSync rsa modul
  • 将操作分配给 Automator 中的变量以在 Shell 脚本中使用

    好吧 这件事现在让我发疯 因此 操作 1 选择一个文件夹 我想将该文件夹的路径保存为 var 1 操作 3 选择一个文件 我想将该文件的路径保存为 var 2 所以到底 var 1 Users Prometheus Desktop var
  • Chrome/Firefox 中双美元符号选择器查询功能的来源是什么?

    Check 这个jsfiddle http jsfiddle net T2PMc 并查看控制台 没有定义 现在 打开一个全新的窗口 然后输入 进入控制台 它定义了一个函数 用于获取与选择器匹配的所有 dom 元素的 类似 jquery 的
  • jQuery Isotope — 居中且流畅/响应式

    我要问一个关于Isotope http isotope metafizzy co 它是一个很棒的 jQuery 插件 我已经玩了一段时间了 但我对 javascript 的了解还不够 无法结合两种同位素技术 响应同位素 http isoto