Tag: jquery masonry

使用WordPress和imagesLoaded的jQuery砌体: 我在我正在研究的wordpress主题上使用jquery砌体。在努力让它工作了一段时间之后我发现了这个： jQuery(function () { jQuery(‘#masonry-wrap’).masonry({ itemSelector: ‘.masonry-box’, columnWidth: 283 }); }) 似乎对我来说工作正常……但是在Chrome和Safari中检查网站会将包含元素的底部推入以下元素中…… 现在我在某处读到，这可以通过使用imagesLoaded插件和我在这里找到的代码来解决： http ：//masonry.desandro.com/demos/images.html – 但是因为我对jQuery非常糟糕，我让它上class有点困难。任何人都可以帮助我将它合并到我已经使用的代码中并且有效（上面的那个）？任何帮助将不胜感激！！朱利安

嵌套砌体物体: 我正在尝试使用容器创建图表视图。因此，如果：[A的 – > B的 – > C的]视图将显示在As内部的Bs内的对象c。像这样的东西：我认为砌体视图是完美的，但我不能让嵌套工作正常。到目前为止我所掌握的小提琴： http ： //jsfiddle.net/paulocoelho/5SxQ5/4/ 我不明白为什么他们不会吝啬。我也尝试过使用CSS的列数和列间隙，但发现渲染非常错误。小提琴代码因为我必须…… var $container = $(‘.container’); $container.masonry({ /*columnWidth: 200,*/ itemSelector: ‘.eWrapper’ });

在同位素定位后找到目标位置: 我正在使用David Desandros Isotope来建立一个新站点，但现在看来我无法使用jquery找到每个元素的位置。具体来说，我试图在hover上附加工具提示，但通常我想知道在Isotope格式化之后如何获取每个锚的position（）。截至目前，每个元素都显示左侧，左侧边距，位置（）。左侧的“0”以及我能想到的每个其他定位属性。

从下往上的砌体堆叠: 我想从下往上堆砌我的砌砖。这个问题之前得到了解答，但是Masonry的修改和分支现在使用了一个非常旧版本的脚本。较新版本的Masonry有我需要的错误修复。那么有谁知道如何将旧解决方案应用于较新的脚本？这是旧的解决方案。 var position = (opts.fromBottom) ? { left: props.colW * shortCol + props.posLeft, bottom: minimumY } : { left: props.colW * shortCol + props.posLeft, top: minimumY }; 这是一个较新的砌体脚本的小提琴。我在第74行添加了fromBottom选项。有问题的代码在第285行附近。这个问题在最新版本的Masonry（现在是标准选项）中已经过时了。

在Ajax div刷新后，Jquery Masonry相互加载: 我正在使用ajax刷新包含图像的div。我最初使用砌体来添加布局。然后ajax调用返回一个使用html（）方法刷新div的js。现在它完成后我正在调用masonry(‘reloadItems’) 。但是砌筑将所有图像加载到另一个上。页面resize后，它的工作原理。我尝试手动触发页面resize，但它不会使砌体进行调整。 JS： $(‘#timerange-select, #category_select’).bind(‘change’, function() { form=$(‘#images-filter-form’); $.get(form.action, form.serialize(),function(){ var $container = $(‘#images_container’); $container.imagesLoaded(function(){$container.masonry(‘reloadItems’);}); $(window).trigger(‘resize’); }, ‘script’); }); 好的，这个ajax请求的响应是： $(‘#images_container’).html(”); 所以我没有附加图片。我正在更换容器。这实际上是相互加载的10个图像。编辑：请参阅http://stackoverflow.com/questions/17697223/masonry-images-overlapping-above-each-other/17697495?noredirect=1#17697495获取css和html。

砌体/动态幻灯片高度问题: 我对接下来正在进行的项目的后续步骤感到困惑，希望你能给我一些想法/帮助。 http://goo.gl/4d72h 我正在使用Wordpress，以及Portfolio Slideshow Pro（http://madebyraygun.com/wordpress/plugins/portfolio-slideshow-pro/）和Masonry（http://masonry.desandro.com/index.html）的组合创建此项目的登录页面。正如您通过访问该网站所看到的，每个’post’都包含在grid_6 float中，每行允许两个浮点数，然后我使用砌体将所有内容放在一起。我已将砌体代码包装在（窗口）.load函数中，等待所有特色图像都加载后再启动砌体。很简单。 $(window).load(function(){ var $container = $(‘.masonry-cont-area’); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : ‘.single-fg-post’ }); }); }); 然而，砌体只考虑了它的定位等第一个特征图像。如果单击图像或点，它将前进到下一个可能更长或更短的图像，这会导致一些问题。因为砌体已经发生，它与下一个post等重叠。当你点击上面给出的链接上的图像时，你可以看到我的意思。那么，我今天所追求的是关于如何解决这个问题的任何想法？砖石结构可以从幻灯片中最高的图像中获取高度吗？点击图像时它会动态变化吗？我可以确保绝对定位项目始终给出底部边距吗？任何想法都会非常感激。谢谢大家，理查德

requireJS with JQuery，Masonry，＆ImagesLoaded：Object 没有方法’imagesLoaded’: 这里需要新手。试图转换一些JQuery代码我以旧的方式工作得很好，需要使用RequireJS。我的页面标题通过脚本标记加载三个JS文件 – require.js本身，我的require.cfg.js和boot / main.js以及特定于站点的function。相关的require.cfg.js摘录： ,paths: { ‘boot’: ‘src/boot’ ,’jquery’: ‘lib/jquery.min’ ,’jquery.masonry’: ‘lib/plugins/masonry.pkgd.min’ ,’jquery.imagesloaded’: ‘lib/plugins/imagesloaded.pkgd.min’ } ,shim: { ‘jquery’: { exports: ‘jQuery’ } ,’jquery.masonry’: [‘jquery’] ,’jquery.imagesloaded’: [‘jquery’] } 开机/ main.js： require([ ‘jquery’, ‘jquery.masonry’, ‘jquery.imagesloaded’, ], function($) { // The following code worked just fine when I included it in the header of […]

jquery砌体图像重叠，直到完成页面resize: 我发现这个模板演示了我对jquery砌体和图像布局的问题。看一下这个twitter bootstrap模板页面：第一次加载页面时，所有图像都相互堆叠，直到页面刷新或重新resize为止。然后正确显示图像。这是我的HTML和jQuery有同样的问题： HTML Loading … jQuery的 $.post(“functions/photo_functions.php”, { f: ‘getallphotos’}, function(data) { $(‘#loading’).hide(); if(data) { $.each(data.images, function(i, image) { var img_block = ” + ” + ” + ” + ” + ” + ”; $(“.gallery-masonry”).append(img_block); }); $(‘.gallery-masonry’).masonry({ itemSelector: ‘.item’, isAnimated: true, isFitWidth: true }); } }, “json”); 知道为什么会发生这种情况以及如何解决这个问题？

jquery masonry在初始页面加载时崩溃，单击“主页”菜单按钮后工作正常: 我的jquery砌体设置在初始页面加载时奇怪地工作。它似乎将第一行中的图像放在第一行中，第二行与第一行重叠，第三行相同。页面加载后，您可以单击主页按钮或徽标并重新加载页面，它工作正常。我在functions.php中有这个代码，用于将masonry和jquery脚本放入： if (!is_admin()) { wp_enqueue_script(‘jquery’); wp_register_script(‘jquery_min’, get_template_directory_uri(). ‘/js/jquery.min.js’, array(‘jquery’), ‘1.6.1’ ); wp_enqueue_script(‘jquery_min’); wp_enqueue_script(‘jquery’); wp_register_script(‘jquery_masonry’, get_template_directory_uri(). ‘/js/jquery.masonry.min.js’, array(‘jquery’), ‘2.1.06’ ); wp_enqueue_script(‘jquery_masonry’); } 这个脚本在head.php中： $(function(){ $(‘#content’).masonry({ // options… itemSelector : ‘.product’, columnWidth : 310, isAnimated: true, animationOptions: { duration: 700, easing: ‘linear’, queue: false } }); }); 这是该网站的链接。任何想法为什么这在初始页面加载时奇怪地加载？我很擅长编写任何东西，所以请善待。

使用jquery实现无限滚动: 我正在开发一个使用jQuery Masonry和Infinite Scroll插件的项目，使用他们的API从instagram加载“n”张图片。看看这个简短的例子，我的理解是我需要事先呈现要呈现的html页面：问题是，我真的不知道将检索多少张图片。以下是我一次检索20张照片的示例。 $(document).ready(function(){ var access_token = location.hash.split(‘=’)[1]; if (location.hash) { $.ajax({ type: “GET”, dataType: “jsonp”, cache: false, url: “https://api.instagram.com/v1/users/MY_USER_ID/media/recent/?access_token=MY_ACCESS_TOKEN”, success: function(data) { for (var i = 0; i < 20; i++) { $("#instafeed").append("”); } } }); } else { location.href=”https://instagram.com/oauth/authorize/?display=touch&client_id=MY_CLIENT_ID&redirect_uri=MY_URI”; } }); 我想我需要一个分页机制，但基于上面提到的教程，我相信我首先需要预先定义要加载的html页面。所以现在我的问题这是否意味着这个插件（ Infinite Scroll ）需要在目录中包含“n”个html文件才能实现无限滚动？如果我不知道我将拥有多少页面，是否可以使用相同的插件实现无限滚动。甚至更好，甚至不必创建物理html文件？如何实施这种分页？ […]