问题标签 [masonry]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 是否有一个 jQuery 插件可以允许 div 列的洗牌?
我有 4 个 div 在页面中创建 4 行。在每一行中,有 4 个方形 div,所以本质上我们有一个 4 x 4 的 (16) 个方形 div 块。
当用户将鼠标悬停在 div 上时,高度会动态更改为 +40px。现在,这会调整父容器的高度,从而将下面的行向下推。
我想要的是能够只下推调整大小元素正下方的元素。
设置
期望的影响
然后,当调整蓝色元素的大小时,会发生以下行为(用 css 破解以展示所需的行为):
这可能吗?我认为可能是在使用砖石时,但我很少使用砖石,甚至不知道从哪里开始。
任何建议/指针将不胜感激。
wordpress - Wordpress - 砌体被解雇时的变化
我有一个愚蠢的时刻,想知道你能帮忙。
我有一个名为“推荐”的自定义帖子类型。我有一个页面显示这些帖子。我想使用砖石(现在捆绑在 Wordpress 中)来处理我拥有的 2 列布局。
我完成了本教程,但它涉及图像,而我没有。
我有这个代码
在浏览器控制台中我有这个错误Uncaught ReferenceError: imagesLoaded is not defined
我将如何调整上面的代码以不等待图像被加载?
谢谢
[更新]
我将脚本放在它自己的 .js 文件中,并在我functions.php
导入的脚本中使用wp_enqueue_script
如下所示。
wp_enqueue_script('testimonial-masonry', get_stylesheet_directory_uri().'/js/testimonial-masonry.js', array( 'masonry' ), '1.0', true );
css - 不同浏览器中的 Masonry 博客布局问题
我是网页设计的新手,非常感谢任何人的帮助!
我希望我的博客存档页面有一种砖石布局。但我希望所有帖子的大小都相同,以便创建一个完美的网格。布局正确显示是 Safari,但在 Chrome 和 Firefox 中,列变得混乱。标题将在一个列中,而特色图像将延续到下一列。
我尝试添加 {max-width:75%; height:900px;} 这解决了 Chrome 中的问题,但没有解决 Firefox 中的问题,并且完全弄乱了 Safari 中的布局(列重叠在侧边栏上)。
这是博客存档页面:http ://thehousecandy.com/category/all-things-decor/
这是我目前使用的css:
}
}
}
}
}
}
}
}
}
}
}
jquery - 砌体和无限滚动图像重叠
我在我的网站上使用 Masonry 和 Infinite Scroll 来加载内容。但是,每当它到达无限滚动加载新内容的点时,图像就会相互重叠。我已经尝试了我能想到的一切,但没有任何效果。有任何想法吗?
HTML
JS
anchor - 使用 Masonry 布局锚定页面
自从我第一次发布这个问题以来,我已经决定采用一种方法,但要么是完全错误,要么实施不当。
ISSUE 我有几个页面包含 div 内容并使用 jQuery Masonry 进行布局。这些页面通过锚页面具有交叉引用链接。例如,页面 A 上的第五个内容 div 链接到页面 B 上第九个 div 上的锚点。
问题是在 Masonry 完成之前锚位置不正确存在 - 即在 Masonry 关闭时锚可以正常工作,但是当 Masonry 运行时链接最终会转到页面顶部。
尝试的解决方案我假设我需要停止寻找锚的动作,直到砌体完成,但我无法弄清楚如何在砌体完成后实现我假定的调用滚动函数的方法。
我什至接近我尝试编码的方式:
虽然有一个平滑滚动解决方案会很好。如果能进入页面的正确部分,我将不胜感激。
PS - 我也知道从 Masonry jQuery masonry 如何调用 layoutComplete获得准确或一致的响应可能存在问题
jquery - Wordpress 上的砌体与其他内容重叠
我有一个安装 WP 和 Genesis 主题的客户端。我正在使用砖石来平铺特定类别的帖子。我遇到的问题是页面上有砌体重叠的其他内容(类别描述)。我试过 $window.on('load', function(){
我已经尝试设置超时来延迟砌体。
无论我做什么,当砌体初始化时,帖子都会覆盖描述内容。有什么建议么?提前致谢。
编辑:使用中的砌体代码->
现场直播链接:http: //landmark2skate.com/category/secret-stash/
谢谢参观。
ember.js - Ember.js Masonry 渲染不等待数据模型生成
我正在尝试在假设的电子商务站点中构建最畅销商品的砌体视图,但在可以通过 RESTAdapter 生成数据模型之前呈现砌体。这是我的 Ember.js 代码:
这是生成 itemcloud 的模板文件部分。
现在,由于数据获取和模板渲染的异步性质,我正在努力寻找一种方法来保持 Masonry 渲染,直到获取数据之后。我的研究表明,为 CloudController 对象使用视图会很有用,但我试图弄清楚我当前的设计中是否缺少某些东西。此外,如果有人可以在此处为 CloudController 对象提供正确使用视图的指针
让我知道是否需要提供更多说明。谢谢!
jquery - 砌体与我的页脚重叠
我正在使用 Masonry 创建帖子网格,但正如您在下面的示例中看到的那样,masonry div/boxes 与我的页脚重叠。有什么想法可以让页脚在砌体 div 之后开始?
示例:http: //jsfiddle.net/CkhUQ/
用于包裹砖石的页脚和容器的 CSS:
javascript - 限制砌体中的列数 isFitWidth 居中布局
我在这个问题上挣扎了一段时间;我正在创建这个布局:
http://www.nomdeplume.it/layout_new/
我的问题是我无法设置每行的最大元素数;我的意思是当浏览器调整大小时列数会适应,但我希望它最多为 4。
这似乎是一个平庸的问题,为什么没有选择这样做呢?另一种方法是设置边距或其他东西,但 isFitWidth 不适用于特定的宽度或边距。
这是代码
css 很简单,例如 isFitWidth 选项
javascript - 当柱子太大并在右侧留下间隙时,砌体中心
我是 JavaScript 新手。我真的只知道 html css,在我的新 tumblr 主题中添加砖石是我想要接受的挑战,事实证明这就是:挑战。
我的示例页面:示例
您可以看到,如果列不能填满整个页面,那么砌体网格的右侧将出现一个大间隙。如果存在间隙,我想要的是根据窗口大小的宽度来设置网格中心。
我已经尝试使用 .masonry 和 .entry masonry-brick 上的自动边距使用 css 来破解它,但没有运气。
我认为这可能是 javascript/jquery 中修复的问题,但我对它太陌生了。
这是所有代码(代码是从为其他开发人员打开此代码的主题开发人员那里复制和粘贴的)。
提前感谢任何人的帮助。