Tag: jquery masonry

砌体为什么要安排在单列重叠

我正在使用附加函数将元素附加到已经初始化的砌体实例，但是我的所有切片都在一列中布局，而且很多都是重叠的。 你能看出我做错了什么吗？ function placeNewsTiles(news){ //places news tiles var length = (news.data.length > 20) ? 20 : news.data.length; var $container = $(‘#news’); var elems =””; for(var i = 0; i < length; i++){ elems += '\ \ \ ‘ + news.data[i]._title + ‘\ \ ‘ + news.data[i]._source + ‘\ \ \ \ \ \ \ \ […]

无法使用JQuery初始化Masonry

根据官方文档 ，有不同的方法来初始化砌体容器。 HTML初始化工作正常，但是当我尝试将参数从data-masonry属性移动到JQuery时，事情就会中断。 这是使用JSON参数的HTML初始化。 然后，当我将它们移动到我的js / JQuery文件时，这就是它当前的样子： var $container = $(‘#container’); // initialize $container.masonry({ columnWidth: ‘.grid-sizer’, itemSelector: ‘.item’, isFitWidth: true }); 使用后一版本，grid-sizer元素变得可见，当然不应该出现。 我在官方文档中没有看到关于何时需要在JQuery中调用初始化代码的规范。 是$（文件）.ready我可以称之为？ 布局破坏的JSFIDDLE： http ： //jsfiddle.net/1f1kwfbd/10/

jquery，追加完成后的砌体

我在http://jsfiddle.net/XMdYw/7/下面有jQuery var elements = ”; var ELEMENT_COUNT_PER_PAGE = 301; var page = 1; for (var i = (ELEMENT_COUNT_PER_PAGE * (page – 1)); i <= (ELEMENT_COUNT_PER_PAGE * page); i++) { elements+= '’ } $(‘.imagecontainer’).append(elements).masonry();​ 它的问题是图像重叠，刷新它修复的页面后，但一旦网站完全实现了编码，它又会出现问题。 部分工作 我说它部分工作的原因是因为img上没有div.imgwrap换行 var elements = ”; var ELEMENT_COUNT_PER_PAGE = 301; var page = 1; for (var i = (ELEMENT_COUNT_PER_PAGE * (page […]

砌体网格高度相同

尝试设置Masonry脚本以显示此页面上的图像： http ： //www.stefanheinrichs.com/projects/有可能吗？ 也许还有一些其他库会更好？ 提前感谢您的帮助

Tumblr Masonry与PXU Photoset问题

当我使用Masonry作为我的Tumblr主题时，PXU Photoset Extended没有正确加载这个问题。 我知道是什么导致它，我遗憾地不知道如何解决它。 我发现在Masonry加载时减少闪烁的唯一方法就是用CSS隐藏容器（display：none）然后在加载Masonry脚本时取消隐藏它。 看起来这有一个奇怪的副作用PXU Photoset脚本没有正确渲染图像（它们大多被切断，并在调整窗口大小时跳转到它们的实际大小）。 所以我使用这段代码来调用Masonry，ImagesLoaded和Infinite Scroll： $(document).ready(function(){ var $container = $(‘#container’); $container.imagesLoaded(function(){ $container.show(); $container.masonry({ itemSelector: ‘article’, gutter: 50, isFitWidth: true, }); }); $container.infinitescroll({ navSelector : ‘#pagination-infinite’, // selector for the paged navigation nextSelector : ‘#pagination-infinite a.next’, // selector for the NEXT link (to page 2) itemSelector : ‘article’, // selector for all […]

Jquery Isotope插件：生成随机大小的图像

我正在使用Jquery Isotope插件，其div具有背景图像并且具有特定大小： .frontpageimage { height: 200px; width: 200px; background-image: url(’tile1.jpg’); } 这很好用。 但是我想在那里随意选择和成像并使其比其他更大，所以我创建了这个： $(‘#isotopecontainer .isotope-item:nth-child(2)’).find(‘.frontpageimage’).addClass(‘frontpageimagehigh’); .frontpageimagehigh { height: 420px; width: 200px; } （注意：目前硬编码选择第二张图像 – 稍后将进行随机化。） 麻烦的是，如果我在上面的代码中插入上面的代码，那么它就不起作用了。 如果我在调用Isotope后插入上面的代码，它可以工作，但图像重叠 – 即：图像在Isotope渲染后改变大小。 有谁知道如何将其添加到现有的同位素脚本中？ 或者有人对我有任何建议吗？ 如果需要澄清，请告诉我。 谢谢

响应式砌体布局问题

我正在使用Masonry来布局我的网站，一切正常，但是有响应的问题。 目前所有元素都设置为31.8％的宽度（也有一些边距等）。我假设通过调整浏览器窗口的大小，我仍然会保留3列，但是所有元素的宽度都会减小，但是不是这样，通过调整窗口的大小，一切都开始分崩离析，我无法分辨出这种奇怪的行为来自何处。 你可以在这里看到我的现场演示网站： http ： //freshbeer.lv/test/index.html 我真的不知道是什么导致了这种奇怪的行为，所以我不知道在这里发布哪些代码，如果你知道哪些位可能导致它，告诉我，我会在这里添加它。 编辑：有趣的是，在调整它并刷新窗口后，它看起来更好，但不完全正确。 此外，我试图实现类似于这个http://tympanus.net/codrops/collective/collective-57/

隐藏div的高度不随着砌体内容而扩展

我有一个脚本切换div的可见性，div内部是加载了砌体插件的内容。 我遇到的问题是砌体div（因此两个包装div）在砌体内容加载时不会在高度上扩展 – 它将砌体项目拼凑在一起。 这是我的代码： view? #step_wrapper{ width:960px; margin:0px auto; /*float:left;*/ } .step_num{ float:left; width:50px; background-color:#0099ff; } .step{ float:left; width:910px; background-color:#ff0000; padding-bottom:20px; margin-bottom:20px; } .step h2{ padding:0px; margin:0px; } .media{ background-color:#59A20E; width:100%; text-align:center; cursor:hand; float:left; } #content-step-1{ } .content{ float:left; min-width:785px; margin-left:40px; background-color:#0066ff; padding-left:15px; display:none; } .item { width: 165px; float: left; padding:5px; background-color:#FF0; margin-top:10px; […]

如何使用砌体启用无限滚动？

那么如何在我的砌体流体布局中添加或集成无限滚动？ 我已经用谷歌搜索但不明白。这是我到目前为止所得到的： /** * Base js functions */ $(document).ready(function(){ var $container = $(‘.container’); var gutter = 20; var min_width = 270; $container.imagesLoaded( function(){ $container.masonry({ itemSelector : ‘.box’, gutterWidth: gutter, isAnimated: true, columnWidth: function( containerWidth ) { var box_width = (((containerWidth – 2*gutter)/3) | 0) ; if (box_width < min_width) { box_width = (((containerWidth – gutter)/2) […]

砌体给容器0高度

我正在研究一些涉及响应式砌体布局的东西。 我有一个容器，其最大宽度为960px但随着浏览器缩小。 我的网格项目具有基于百分比的宽度（100％，66.666666etc％，33.33333etc％）。 出于某种原因，当我将一个函数传递给columnWidth选项时，它总是给容器一个高度为0.这就是我实例化Masonry的方式。 $(window).load(function() { var $container; $container = $(“#grid_container”); $container.masonry({ columnWidth: function(containerWidth) { return containerWidth / 3; }, itemSelector: “.grid_item”, isFitWidth: true, isResizable: true, gutter: 10 }); }); 知道为什么会这样做吗？ 因为我使用$(window).load它应该能够计算高度。 我错过了一些非常明显的东西吗？ 是否根本不可能使用百分比列宽与砌体？