这是与这个问题相同的问题,但我在这里对JSFiddle问题进行了重新讨论.所以我以为我会转发.
JQuery Masonry似乎只在第一次运行时评估其容器的子项.在那之后,不可能让它再次查看DOM以重新评估它的孩子.
我正在使用jquery砌体将图像放在我的网站上,但遇到了麻烦.
图像显示在彼此之上.这是现场网站的链接:
http://www.faisalandsamreen.com/meetus
如果你进行几次硬刷,你会看到图像每次都会移动.
JS小提琴版本在这里:
我究竟做错了什么？？？
谢谢,
费萨尔
我有一个同位素项目,当有人在里面评论时它会增长.当它生长时,我如何告诉主同位素容器随之生长？现在正在发生的事情是,随着同位素项的增长,同位素容器保持它在调用$(".home_main")时设置的初始高度.同位素(); 因此,当我在同位素项中留下注释时,项目会增长,然后被主容器切断.谢谢.
我已经看到你可以设置,resizesContainer: true但这对我没有帮助.谢谢.
不确定它是否有任何区别,但我也尝试使用Masonry jquery插件(看起来非常相似)并且遇到了同样的问题.
砌体(v3)代码:
$(function msnry(){
var columns = 3,
setColumns = function() { columns = $( window ).width() > 640 ? 3 : $(window).width() > 320 ? 2 : 1; };
setColumns();
$(window).resize(setColumns);
// layout Masonry again after all images have loaded
var $container = $('#portfoliocontent').masonry();
var msnry;
$container.imagesLoaded( function(){
msnry = new Masonry( container, {
itemSelector : '.item',
columnWidth: function( containerWidth ) { return containerWidth / columns;}
});
});
我的砌体容器(又名我的投资组合)
<div id="portfoliocontent" class="portfoliocontainer"></div>
我的目标是隐藏所有的divs,类似'designshwr',但是砌体的重新加载根本不起作用.
$('.engineeringiC').click(function(){
if($('div.item').hasClass('designshwr')){
$('div.item.designshwr').hide('fast');
$('.portfoliocontainer').masonry('reloadItems');
}
有什么建议？过去一周我一直在摸不着头脑以不同的方式让它发挥作用,我仍然没有任何运气:(
我正在<li>通过页面加载几个元素.ajax()并将它们堆叠在一起。然后用户可以
问题出现在最后一个选项中：当展开项目时，元素会按照它们在网格中的指定位置移动，然后闪烁片刻回到它们的原始位置。
在此处观看视频：视频(Quicktime .mov)
在此处观看现场演示：现场演示
该问题仅在大约 50% 的时间内发生，而不是每次我传播物品时都会发生。例如，在上面的视频中，它只在我第二次也是最后一次点击“传播”时发生。我一直无法说出究竟是什么导致了错误的发生。该问题出现在 Mac 上的 Chrome 29.0.1547.57 中。Firefox 22 和 Safari 6.0.5 不受影响。我还没有尝试过任何其他浏览器。
单击传播链接时， .masonry() 以这种方式调用：
$('.content').masonry({
columnWidth: 180,
gutter: 20,
itemSelector: 'li',
isResizeBound: false,
isLayoutInstant: false
});
我很感谢您提供有关如何解决此问题的提示。
更新：我注意到这个问题也出现在其他使用 jquery.masonry 的网站上，例如插件的网站本身。在此处查看视频：视频。其他人是否有同样的问题，或者这是我的设置（OS X 10.7.5，Chrome 29.0.1547.57）？
我在将Wordpress中的无限滚动插件与使用砌体的主题集成时遇到了一个令人讨厌的问题.
我有无限滚动的最新版本2.6.2,我在插件的回调部分添加了这段代码:
// hide new items while they are loading
var $newElems = jQuery(newElements).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
但它不起作用,它增加了对新元素的不透明度,但它没有添加位置等,所以不太有效; 新产品将在旧产品的页面顶部显示.
脚本看起来像:
/* <![CDATA[ /
var infinite_scroll = "{\"loading\":{\"msgText\":\"Loading...<\\/em>\",\"finishedMsg\":\"No additional products.<\\/em>\",\"img\":\"http:\\/\\/www.test.com\\\/wp-content\\\/plugins\\\/infinite-scroll\\\/img\\\/ajax-loader.gif\"},\"nextSelector\":\".next\",\"navSelector\":\".woo-pagination\",\"itemSelector\":\"li.product\",\"contentSelector\":\"ul.products\",\"debug\":false,\"behavior\":\"\",\"callback\":\"\\\/\\\/ hide new items while they are loading\r\nvar $newElems = jQuery(newElements).css({ opacity: 0 });\r\n\\/\\/ ensure that images load before adding to masonry layout\r\n$newElems.imagesLoaded(function(){\r\n\\/\\/ show elems …因此，我的项目可以具有多个用于过滤的类。像这样：
<div class="items>
<div class="item category-1 category-2">An item that displays initially.</div>
<div class="item category-1 category-2 initially-hidden">An item that is initially hidden.</div>
<div class="item category-1 category-2">An item that displays initially.</div>
<div class="item category-1 category-2 initially-hidden">An item that is initially hidden.</div>
<div class="item category-1 category-2">An item that displays initially.</div>
</div>
使用同位素，如何在页面加载时隐藏具有特定类的项目？假设我要隐藏任何类别为带initially-hidden负载的项目，但是当我单击该项目具有的其他任何类别的过滤器时，仍然能够显示该项目？对于上面的示例代码，说我单击了一个category-2过滤器，那么所有具有category-2（即使具有initially-hidden）的项目都会出现吗？
基本上在我正在处理的项目中，客户端希望能够最初在页面加载时隐藏项目，但是在过滤时显示它们。因此，我为她创建了一种使用标记这些内容的方法initially-hidden，但无法绕过如何最初隐藏它们的想法，但是当单击关联的过滤器时，仍然允许它们显示出来。
我已经通过desandro 遇到了这个小提琴，但这并不是我要找的东西，因为它假定每个项目只有一个类（红色，绿色或蓝色）。
编辑
这是我编辑过的desandro小提琴的一部分，它更像我的情况（项目可以有多个类）。小提琴。
最终编辑
答案似乎是相反的，添加一个initially-shown类并过滤页面加载时的那些类。因此，没有让我的客户将所有内容都标记为initially-shown，而是使用了这种方法：
$container.find('.tile:not(.initially-hidden)').addClass('initially-shown');
因为它们有数百个项目，而且似乎只藏了极少数。
这是最新的小提琴。
我想加载一些图像的砌体视图但发生错误:
TypeError: $(...).masonry is not a function
<div data-masonry-options="{"columnWidth": 105, "itemSelector":".item"}" class="img-container js-masonry" style="position: relative; height: 381.417px;">
<div class="item">
<img src="https://s3.amazonaws.com/clarifai-img/demo/889/88940833.jpg">
</div>
<div class="item">
<img src="https://s3.amazonaws.com/clarifai-img/demo/907/90775901.jpg">
</div>
<div class="item">
<img src="https://s3.amazonaws.com/clarifai-img/demo/294/29489326.jpg">
</div>
<div class="item ">
<img src="https://s3.amazonaws.com/clarifai-img/demo/100/100656385.jpg">
</div>
<div class="item ">
<img src="https://s3.amazonaws.com/clarifai-img/demo/889/88940839.jpg">
</div>
<div class="item ">
<img src="https://s3.amazonaws.com/clarifai-img/demo/111/111773987.jpg">
</div>
<div class="item ">
<img src="https://s3.amazonaws.com/clarifai-img/demo/146/146371016.jpg">
</div>
<div class="item">
<img src="https://s3.amazonaws.com/clarifai-img/demo/103/10313578.jpg">
</div>
<div class="item ">
<img src="https://s3.amazonaws.com/clarifai-img/demo/554/55473337.jpg">
</div>
<div class="item ">
<img src="https://s3.amazonaws.com/clarifai-img/demo/537/53727259.jpg">
</div>
<div class="item ">
<img src="https://s3.amazonaws.com/clarifai-img/demo/111/111246515.jpg">
</div> …我需要每页有多个砌体网格。我使用 wordpress 循环生成代码，因此每个 div 容器都具有相同的类名。
有没有办法在所有具有相同名称的 div 容器上调用 Masonry？
html
<!--Masonry 1-->
<div class="print-slider">
<div class="print-slider-sizer"></div>
<div class="gutter-sizer"></div>
<div class="print-slider-item"></div>
<div class="print-slider-item"></div>
<div class="print-slider-item"></div>
<div class="print-slider-item"></div>
</div>
<!--Masonry 2-->
<div class="print-slider">
<div class="print-slider-sizer"></div>
<div class="gutter-sizer"></div>
<div class="print-slider-item"></div>
<div class="print-slider-item"></div>
<div class="print-slider-item"></div>
<div class="print-slider-item"></div>
</div>
JS
var grid = document.querySelector('.print-slider');
var msnry;
imagesLoaded( grid, function() {
// init Isotope after all images have loaded
msnry = new Masonry( grid, {
itemSelector: '.print-slider-item',
columnWidth: '.print-slider-sizer',
gutter: '.gutter-sizer',
percentPosition: true,
});
});
这是问题的代码笔： …
我有它的工作,但由于某种原因,它刚刚停止工作,我不知道我做了什么.箱子divs左边漂浮,我只是不知道我哪里出错了.
jQuery的
var $container = $('.work');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.box',
isAnimated: true,
columnWidth: 250
});
});
HTML
<div id="part-one" class="work">
<div class="box col2"><img src="_assets/images/one.jpg" alt="" /></a></div>
<div class="box col2"><img src="_assets/images/two.jpg" alt="" /></a></div>
<div class="box col2"><img src="_assets/images/three.jpg" alt="" /></a></div>
<div class="box col2"><img src="_assets/images/four.jpg" alt="" /></a></div>
<div class="box col2"><img src="_assets/images/five.jpg" alt="" /></a></div>
</div>
CSS
.work {
margin-left:98px;
top:0;
max-width:1600px;
padding-bottom:100px;
position:absolute;
}