jjzjj

javascript - 同位素 fitColumns 布局导致容器变为空白

coder 2024-07-23 原文

参见 http://jsfiddle.net/cUcFd/5/ -- 请注意，如果您将 layoutMode 更改为“masonry”或“fitRows”，它会正常工作。但是对于“fitColumns”，它只是空白，所有 block 都消失了。

为了 fitColumns 模式的工作，似乎有关于在容器和项目上设置什么样式的要求，但我找不到关于它们是什么的任何文档。

最佳答案

为什么它不起作用

fitColumns 是一种“水平布局”，因此它旨在向侧面移动而不是上下移动 - 类似于横向卷轴游戏。考虑到他们的设计，水平布局需要一个高度属性，如下所示:http://isotope.metafizzy.co/layout-modes.html#horizontal-layouts

静态解决方案

I want to fill up the width of the container with however many columns fit, and I want it to take up as much vertical space as it needs to.

您想使用 masonry 而不是 fitColumns。设置 columnWidth 将允许您填充容器的宽度并根据需要使用尽可能多的垂直空间。例如:http://jsfiddle.net/cUcFd/22/ 

$('#container').isotope({
    itemSelector : '.block',
    // layoutMode: 'fitColumns',
    layoutMode: 'masonry',
    masonry: {
        columnWidth: 100
    }
});

动态解决方案

假设您不知道列的宽度并且想动态地找到它，您可以使用此处提供的类似代码:https://stackoverflow.com/a/8853777/1786459 以 #container 中最宽的元素为基础。

例如:http://jsfiddle.net/cUcFd/24/ 

var column_width = Math.max.apply(null,$('#container .block').map(function(){return $(this).outerWidth(true);}).get());

但是，由您决定最合适的列宽设置方法。

关于javascript - 同位素 fitColumns 布局导致容器变为空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11119444/

容器javascriptcodesectionstrongjquery-isotope

有关javascript - 同位素 fitColumns 布局导致容器变为空白的更多相关文章

  1. ruby - nanoc 和多种布局 - 2

    是否可以为特定(或所有)项目使用多个布局？例如，我有几个项目，我想对其应用两种不同的布局。一个是绿色的，一个是蓝色的(但是)。我想将它们编译到我的输出目录中的两个不同文件夹中(例如v1和v2)。我一直在玩弄规则和编译block，但我不知道这是怎么回事。因为，每个项目在编译过程中只编译一次，我不能告诉nanoc第一次用layout1编译，第二次用layout2编译。我试过这样的东西，但它导致输出文件损坏。compile'*'doifitem.binary?#don’tfilterbinaryitemselsefilter:erblayout'layout1'layout'layout2'

  2. Ruby 守护进程导致 ActiveRecord 记录器 IOError - 2

    我目前正在用Ruby编写一个项目，它使用ActiveRecordgem进行数据库交互，我正在尝试使用ActiveRecord::Base.logger记录所有数据库事件具有以下代码的属性ActiveRecord::Base.logger=Logger.new(File.open('logs/database.log','a'))这适用于迁移等(出于某种原因似乎需要启用日志记录，因为它在禁用时会出现NilClass错误)但是当我尝试运行包含调用ActiveRecord对象的线程守护程序的项目时脚本失败并出现以下错误/System/Library/Frameworks/Ruby.frame

  3. ruby-on-rails - 如何为空白字段编写 rspec？ [Rails3.1] - 2

    我使用rails3.1+rspec和factorygirl。我对必填字段(validates_presence_of)的验证工作正常。我如何让测试将该事实用作“成功”而不是“失败”规范是:describe"Addanindustrywithnoname"docontext"Unabletocreatearecordwhenthenameisblank"dosubjectdoind=Factory.create(:industry_name_blank)endit{shouldbe_invalid}endend但是我失败了:Failures:1)Addanindustrywithnona

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby - 从另一个私有(private)方法中使用 self.xxx() 调用私有(private)方法 xxx，导致错误 "private method ` xxx' called” - 2

    我正在尝试获得良好的Ruby编码风格。为防止意外调用具有相同名称的局部变量，我总是在适当的地方使用self.。但是现在我偶然发现了这个:classMyClass上面的代码导致错误privatemethodsanitize_namecalled但是当删除self.并仅使用sanitize_name时，它会起作用。这是为什么？ 最佳答案 发生这种情况是因为无法使用显式接收器调用私有(private)方法，并且说self.sanitize_name是显式指定应该接收sanitize_name的对象(self)，而不是依赖于隐式接收器(也是

  6. ruby - 为什么 return 关键字会导致我的 'if block' 出现问题？ - 2

    下面的代码工作正常:person={:a=>:A,:b=>:B,:c=>:C}berson={:a=>:A1,:b=>:B1,:c=>:C1}kerson=person.merge(berson)do|key,oldv,newv|ifkey==:aoldvelsifkey==:bnewvelsekeyendendputskerson.inspect但是如果我在“ifblock”中添加return，我会得到一个错误:person={:a=>:A,:b=>:B,:c=>:C}berson={:a=>:A1,:b=>:B1,:c=>:C1}kerson=person.merge(berson

  7. ruby-on-rails - 什么会导致与 APNS 的连接间歇性断开连接？ - 2

    我有一个ruby​​脚本可以打开与Apple推送服务器的连接并发送所有待处理的通知。我看不出任何原因，但当Apple断开我的脚本时，我遇到了管道损坏错误。我已经编写了我的脚本来适应这种情况，但我宁愿只是找出它发生的原因，这样我就可以在第一时间避免它。它不会始终根据特定通知断开连接。它不会以特定的字节传输大小断开连接。一切似乎都是零星的。您可以在单个连接上发送的数据传输或有效负载计数是否有某些限制？看到人们的解决方案始终保持一个连接打开，我认为这不是问题所在。我看到连接在3次通知后断开，我看到它在14次通知后断开。我从未见过它能超过14点。有没有人遇到过这种类型的问题？如何处理？

  8. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  9. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  10. ruby - 在多个线程中引用类方法会导致自动加载循环依赖崩溃 - 2

    代码:threads=[]Thread.abort_on_exception=truebegin#throwexceptionsinthreadssowecanseethemthreadseputs"EXCEPTION:#{e.inspect}"puts"MESSAGE:#{e.message}"end崩溃:.rvm/gems/ruby-2.1.3@req/gems/activesupport-4.1.5/lib/active_support/dependencies.rb:478:inload_missing_constant':自动加载常量MyClass时检测到循环依赖稍加研究后，

随机推荐