个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
图像水平正确对齐，但它们都在垂直方向上间隔开。看看这里 http://brstudios.co.uk/testing正确理解我的意思..
我的标记如下(简化):
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.min.js"></script>
<script type="text/javascript">
var $container = $('.portfolio-container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.break',
columnWidth : 429
});
});
</script>
<style type="text/css">
.break {
float: left;
width: 429px;
margin: 10px 20px;
}
</style>
</head>
<body>
<div class="portfolio-container">
<?php do { ?>
<div class="break">
// Contents taken from MySQL //
</div>
<?php } while ($row_displayPosts = mysql_fetch_assoc($displayPosts)); ?>
</div>
</body>
</html>
我认为它的一部分正在工作，但是正如您通过链接看到的那样，只要它没有将元素垂直移动到一起。有谁指点一下吗？
工作更新:
<script type="text/javascript">
$(document).ready(function() {
var $container = $('.portfolio-container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.break',
columnWidth : 429,
gutterWidth : 40 //Added gutter to simulate margin
});
});
});
</script>
最佳答案
您需要将脚本包装在 JQuery 的 dom 中:
$(document).ready(function() {
var $container = $('.portfolio-container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.break',
columnWidth : 429
});
});
});
Masonry 实际上并未在您的页面上运行，这就是为什么您的元素只是 float 的，而不是按照您期望的方式排列。
编辑:
下载页面并使用它后，您似乎还需要删除:
margin: 10px 20px;
来自您的.break类
以及将砌体脚本包装在 $(document).ready
我怀疑你的边距使元素太宽而无法并排堆叠
关于jquery - Masonry js 不会垂直排列图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11402798/
24
4
0
我正在尝试通过端口将 Elm 应用程序与 Masonry.js 集成，但我在尝试弄清楚如何获取 Signal Html 来触发告诉 Masonry.js 重绘 View 的端口时遇到了麻烦。 我正在使
我的网站设计了媒体查询，以覆盖不同大小的布局。我有砌体组织一堆全尺寸宽度的浮标，没问题。在移动宽度下，所有浮子都会浮起并堆叠在一起。所以我只需要在网站大小调整为平板电脑布局且 768px // */
我遇到了典型的砖石溢出问题。我正在尝试加载推特卡片，但在加载时，它们仍然相互重叠。一旦调整屏幕大小，它们就会工作。仅供引用，我肯定有 imageLoad 和 masonry 。我在 Rails 中这样
如何证明 masonry 网格元素居中？ 似乎 Masonry 将我所有的网格项都 float 到左侧或将内容对齐到左侧: 1 2 3 4 5
我想在下拉菜单中使用 jquery masonry，在复杂的下拉菜单中组织动态菜单项 block (图像和文本)。 我有几个问题。 首先，如果我从 display:none 开始，那么 masonry
我在使用passy masonry时遇到了这个错误。知道这是什么意思吗？因为现在基本上 masonry 对我根本不起作用。 提前致谢 最佳答案 我不确定您的问题的原因是什么，但我只是在处理同样的事情，
我是编程新手(javascript)，但为了使我的 tumblr 主题正常工作，过去几天我做了很多研究。我知道我的问题很常见，但似乎我没有足够的知识来正确集成许多类似示例中给出的代码部分。 My th
我正在使用 masonry和 typekit .因此，我希望布局为 not have overlapping由于图像加载，同时 render the typekit fonts without hav
我在一个项目中成功地使用了 Passy 的 angular-masonry。 https://github.com/passy/angular-masonry 访问 Masonry 对象的事件函数的最
我在将砌体与 Foundation 网格布局集成时遇到问题。本质上，对于不同高度的相同宽度的图像，砌体按预期工作，但在某些断点处，网格只有两列布局，而不是通常的四列布局。 但是，如果您继续最小化浏览器
我正在使用 Handlebars http://handlebarsjs.com/和砖石https://masonry.desandro.com/获取一些 JSON 数据并使用 Jquery prep
我正在尝试在以下页面上获取每个内容: http://snowbird.camorada.com/test.php 以砖石格式查看，如下所示: http://masonry.desandro.com/d
我对最新版本的砌体有一个奇怪的问题。之前让它工作，但对于一个新项目，我下载了最新版本的 jQuery 和 Masonry，一切正常。由于插件中的错误，IE7 不会加载 Masonry 库。 我在 IE
如何每次执行我的函数 Masonry脚本重新组织元素，例如当窗口调整大小时？ 在这个例子中，它只在第一次工作。 $(document).ready(function() { $('#conta
我一直在尝试 Masonry，但无法完全按照我的意愿工作。我使用的元素的宽度和高度各不相同，但都适合一个网格(4 种不同的尺寸，所有最小+边距的倍数)。我还计算了可以精确拟合的元素分布(最小的 7 个
我正在创建一个带阴影的砖石布局。但不幸的是，阴影被剪裁为以下片段。我知道放一些底部填充可以解决这个问题，但是这张卡片的内容可以不时改变，然后高度会根据内容改变。所以这里的问题需要一个纯 CSS 方法来
我在 WordPress 中使用砌体布局，因此我本地站点的砌体布局与循环放在一起。我创建了一个 fiddle 来解释我的问题。 如何控制一个项目在砌体布局中的位置？ 我希望 div 始终位于砖石容器的
我让它工作，但由于某种原因它停止工作，我不知道我做了什么。盒子 div 向左浮动，我只是不知道我在哪里'出了问题。 Jquery var $container = $('.work');
我怎样才能让砖石更多地尊重这里的原始元素顺序？我希望顺序是海豚、鱼、无脊椎动物、鳍足类: var $container = jQuery('.tax-product_cat #content'); $
在目录站点上使用 Masonry。默认情况下，显示的项目按日期排序，然后按部件号排序。我的图像高度不同。问题是，如果我错了，请纠正我，Masonry 将第 2 行第 1 项设置在第 1 行中最短的项下
我是一名优秀的程序员,十分优秀！