Tag: jquery masonry

jQuery砌体留下差距

我试图在一个项目中使用jQuery Masonry并且它无法正常工作：网格的右上角有一个间隙。 我已经尝试调整网格宽度和边距，这导致每行一个块或所有块一起运行（但仍然有一个间隙顶部。） 虽然Masonry正在应用它的类并按预期为元素分配绝对定位，但它实际上看起来并不像块重新排列。 我确信我做错了什么，但现在我不太确定。 我从Stack（http://stackoverflow.com/questions/11695574/jquery-masonry-almost-always-empty-spaces）上的类似问题中找到了一个工作小提琴并仔细修改它以使用我正在工作的尺寸有了，它似乎无法处理这些元素的选择。 小提琴： http ： //jsfiddle.net/dVPA9/4/

jQuery Masonry回调无法正常工作

我正在尝试获得一个回调函数，以便在jQuery Masonry完成定位魔术时执行，防止代码中出现无格式内容。 但是，为了测试，我使用的是一个根本没有调用的简单警报。 var $jigsaw = $(‘#jigsaw’); $jigsaw.imagesLoaded( function(){ $jigsaw.masonry({ columnWidth : 180, isAnimated : !Modernizr.csstransitions, isResizable : true, itemSelector : ‘.piece’ }, function(){ alert(‘Completed’); }); }); 我可能会遗漏一些明显的东西，但任何帮助都会受到赞赏

我可以在我的joomla网站中嵌入一个砌体jquery模板吗？

我想在我的网站上使用Masonry创建一个video库，但我遇到了困难。 我正在使用Joomla作为我的CMS并且已经有一个使用火箭主题的模板但在我的一个页面上我想要一个video列表（我将更新）供人们观看。 我想让它在视觉上吸引人，而砖石引起了我的注意，但我不明白如何让它运行起来。 Jquery如何与Joomla合作，如果它可以的话呢？

尽管使用了desandro和新的jquery，tumblr砌体+无限滚动重叠的post

我是javascript和东西的新手，现在我对tumblr上的砌体和无限滚动有一个令人沮丧的问题。 我几乎阅读了有关这些问题的所有论坛问题，但没有解决我的问题。 所以，我有一个tumblr博客（http://jessman5.tumblr.com），尽管使用： //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js http://masonry.desandro.com/jquery.masonry.min.js http://masonry.desandro.com/js/jquery.infinitescroll.min.js 而这段代码： $(function(){ var container = $(‘#container’); container.infinitescroll({ navSelector : ‘.pagination’, nextSelector : ‘.pagination a’, itemSelector : ‘.post’, loading: { finishedMsg: ‘No more pages to load.’, img: ‘http://sofzh.miximages.com/jquery/6RMhx.gif’ } }, function( newElements ) { var newElems = $( newElements ); newElems.css({ opacity: 0 }); newElems.animate({ opacity: 1 }); container.masonry( ‘appended’, […]

砌体不使用动态内容

砌体不能处理我的动态内容，我不知道为什么。 我不认为这是我身上的一个错误，至少我现在看了几个小时的代码，我找不到任何不起作用的东西。 //reads listbox.php and cycles through the array calling createbox function listboxs() { $.ajax({ url: ‘_php/listbox.php’, success: function (output) { var jsonArray = $.parseJSON(output); $.each(jsonArray, function (i, box) { createbox(box.id, box.name, box.link, box.description, box.tags); }); } }); } //create the code for 1 box function createbox(id, name, link, description, tags) { var boxHtml = […]

Jquery：带有jquery元素的masonry（’hide’，element）方法

所以，我正在使用Masonry在我的网站中制作一个“流畅”的布局，但现在我遇到了一个涉及其隐藏和显示方法的问题。 在一个事件中，我正在打这个电话： $container.masonry(‘hide’, $(this)); 正如你所看到的，我正在使用$(this)告诉砌体通过jquery隐藏哪些元素 但显然，这种方法不适用于jquery元素？ 我的控制台中的错误消息如下所示： Uncaught TypeError: Object # has no method ‘hide’ (masonry.pkgd.min.js:9) 我尝试查看文档，但所有关于接受类型的说法是： $container.masonry( ‘hide’, items ) items类型： Masonry.Items 数组 什么是Masonry.Item应该是什么？ 我如何将我的元素指定为一个？

JQuery砌体！ 更新columnWidth On Window Resize

我正在开发响应式布局，我也在使用JQuery Masonry。 我正在使用以下脚本来获取当前列宽。 var curWidth; var detector; detector = $(‘.magic-column’); curWidth = detector.outerWidth(true); $(window).resize(function(){ if(detector.outerWidth(true)!=curWidth){ curWidth = detector.outerWidth(true); } }); 我的JQuery Masonry init脚本是这样的.. $(window).load(function(){ $(function (){ $wall.masonry({ singleMode: true, columnWidth: curWidth, // This needs to be update on window load & resize both // }); }); }); 我的第一个脚本是正确获取宽度，但在砌体中宽度没有更新…我如何实现加载和resizefunction，以便我的curWidth将更新为砌体以及窗口resize

jQuery Masonry删除函数示例

我已经为我们的网站实现了jQuery砌体，效果很好。 我们的网站是动态的，用户必须能够添加/删除砌体盒。 该站点有一个添加示例，但没有删除示例。 我们的数据库被查询返回x个项目。 循环通过它们被加载和显示。 这是一个代码示例:(我们使用F3框架和F3：重复是它的循环机制。）。 {{@item.title}} 在javascript代码中，项目ID号是唯一的，并传递给函数。 这也是区分每个盒子的div id＃。 我尝试了各种组合和方法，但似乎无法使其工作。 function quickRemove(item){ var obj = $(‘#’+item+”).html(); // item is the product id# but also the div id# $(‘#container’).masonry(‘remove’,obj); $(‘#container’).masonry(‘reloadItems’); $(‘#container’).masonry(‘reload’); } 有没有人成功删除了一个项目，你是怎么做到的？ 谢谢。

jquery help – 在所有图像加载后初始化Masonry

我正在使用砌体插件，但是当页面首次加载时，我的图像会重叠。 如果我改变浏览器的宽度，它们就会落到位。 开发人员告诉我要执行以下操作，但我不确定如何“添加它：正确地添加到我的custom.js文件中。 我被告知： // with jQuery var $container = $(‘#container’); // initialize Masonry after all images have loaded $container.imagesLoaded(function(){ $container.masonry(); }); 谁能正确格式化这个建议，以便我可以使用它？

如何集中砌体物品？

我已经设置了砖石来显示物品： $(‘#list’).masonry({ itemSelector: ‘.propitem’, columnWidth: 230 }); 这有效，但所有项目（ .propitem ）都向左浮动。 例如，如果我的容器#list是600px宽，那么左边会有两列，但是剩下的140px就是它们右边的一个间隙。 我想将两列的中心放在一边，每边有一个70px的“边距”。 我曾尝试使用css来集中这些，但没有运气，例如： #list { text-align: center; } 有谁知道实现这一目标的正确方法？