标签: jquery-masonry

我正在使用David Desandros Isotope创建一个新站点,但现在看来我无法使用jquery找到每个元素的位置.具体来说,我正在尝试在悬停上附加工具提示,但通常我想知道如何在Isotope格式化后获取每个锚点的position().

截至目前,每个元素都显示左侧,左侧边距,位置().左侧的"0"以及我能想到的每个其他定位属性.

我正在使用WordPress帖子的jQuery Isotope插件.我想在页面加载时显示帖子摘录,然后通过简单地扩展div的高度来显示点击的整个帖子.但是,Isotope插件会在用户单击"Read More"按钮以展开页面之前计算div高度,因此新高度会破坏插件.

我正在玩reLayout方法,但还没有想出来......任何想法？

这是一个有效的链接.尝试"草莓"帖子.http://ashlinixon.com/new-test/index.html

此外,代码示例:

HTML:

<article class="item">
    <div class="featured-img"><img src="images/strawberries.jpg" alt="Strawberries" /></div>
    <h2>Strawberries</h2>
    <p class="excerpt">Lorem ipsum dolor sit amet</p>
    <p class="read-more">Read more</p>
    <div class="post">
        test test<br />test test<br />test test
    </div>
</article>

jQuery的:

$(document).ready(function(){
    $(".post").hide();
    $(".excerpt").show();

    $('.read-more').click(function(){
        $(".post").slideToggle();
        $("#portfolio").isotope( 'reLayout' );
    });            
});

谢谢!:)

我的Masonry在ie9中只有一列,但在Firefox中它显示的列很好.我在小提琴中放了一个简单的例子:http: //jsfiddle.net/vNXGB/

它是相同的,有或没有浮动:左.无论我试过哪三个图片加载脚本,以及我是否有图像,它似乎都是一样的:

https://gist.github.com/1539102

https://github.com/desandro/imagesloaded/

https://github.com/alexanderdickson/waitForImages

这样我的小提琴代码就出现了问题？我尝试在其他地方应用CSS,我尝试将IE设置重置为默认,清除IE缓存,上传我的网站,因此它不在localhost等.

有任何想法吗？谢谢.:)

jQuery Masonry的网站在其展示中包含Beyonce的网站:

http://iam.beyonce.com

但它没有显示她是如何实现自动调整大小的效果的.我通过美化器运行她的代码,但它看起来仍然非常混乱:

function resize() {
  1024 < $(window).width() ? 0 == headerNavOpen && $("#header").css({left:-$(window).width()}) : 0 == headerNavOpen && $("#header").css({left:-1024});
  $(".index .post.video").css({width:"33.2%", height:0.332 * $("#container").width() / 1.778})
}

有人知道一种更简单的方法来达到同样的效果吗？

这是一个基本设置的小提琴:http://jsfiddle.net/CfsEb/

这是我在StackOverflow上的第一个问题,所以请原谅我可能做的任何失败.

我花了几天时间试图自己解决这个问题,但无济于事.我已尝试在stackoverflow和其他地方找到几个代码片段,以尝试解决问题.

我正在使用Skeleton和Masonry的组合来构建我的投资组合网站.当我最初加载投资组合时,只有1个小图像.当我第一次调整大小时,它会显示所有列但图像重叠.当我再次调整大小时,大多数瓷砖的高度都是正确的,但较长的瓷砖(JSTOR)仍然被切断.在第三次调整大小(以及所有后续访问)时,正确显示切片.

((编辑:在页面刷新(不再点击链接,但浏览器刷新)网格也变得很糟糕....有时显示所有列但有些图像堆叠,有时只显示1张小图片.))

我对JS或jQuery没有最彻底的了解,所以我的很多修复尝试都可能很笨拙.我在这一点上的假设是,在加载图像之前,砌体正在创建网格...我已经尝试了各种代码位来解决这个问题,包括Desandro自己的imageload片段以及StackOverflow上的其他响应,就像这一样.

现在我的网站应该在new.rdhalexander.com上.我不确定还需要什么其他信息....但我会密切关注这一点.

我正在使用Masonry并附加一些项目($ boxes是一堆包含div的HTML)

$('#masons').append($boxes).masonry('appended', $boxes, false);

这有效 - >新的div由砌体正确组织.然而,它包括一个恼人的动画,其中框从其位置的中心"增长".我不想要这个动画.我怎么能摆脱它？

我试过了

$('#masons').append($boxes).masonry('reload');

但这似乎根本不起作用 - >新的div不是由Masonry组织的.

Masonry并且imagesLoaded应该加载并正常工作。已经创建了一个类似的站点，并且它可以正常工作。我不知道我的问题出在哪里，所以我希望你能看到问题。应该少了点什么。

在 Chrome Inspect 中，我收到以下错误：

Uncaught TypeError: $(...).imagesLoaded is not a function

据我了解，这意味着.imagesLoaded并且Masonry应该正确加载？否则我会收到错误$container.imagesLoaded is not a function？

我试过的

• 检查 jquery-2.1.4.min.js 是否正确加载
• 更改加载 jquery 的顺序
• 在线搜索
• 在 jquery 中搜索错误

标题

<script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/jquery-2.1.4.min.js"></script>
<script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/collection.js"></script>
<?php wp_head(); ?>

HTML

<div class="container">
    <div id="masonry-container" class="row nomargin">
         <div class="col-md-9">
              <div class="item col-lg-4 col-md-4 col-sm-4">
                   <!--- Content --->
              </div>
              <div class="item col-lg-4 col-md-4 col-sm-4">
                   <!--- Content --->
              </div>
              <div class="item col-lg-4 col-md-4 col-sm-4">
                   <!--- Content ---> …

我开始在我的项目中使用awsome JQuery Isotope插件.一切都很好,但我有一个问题与corner-stapm选项.

我的masnory网格中的每个元素都有固定宽度(220px + 5边距)和随机高度(取决于其内容),我在CSS文件中使用@media查询来更改不同屏幕分辨率上的列数(页面宽度可以是230,460 ,690 ......等).

拐角印章的问题出现在最窄的版本(一列) - 角落印章覆盖着同位素元素......

在此演示中的同位素官方页面上也出现同样的问题:http://isotope.metafizzy.co/custom-layout-modes/masonry-corner-stamp.html(当窗口缩小时,大红色矩形隐藏在其他同位素元素后面) .

我发现它可以在Masnory插件演示站点中正常工作! http://masonry.desandro.com/demos/corner-stamp.html

我已经结合将网站脚本从Masnory复制到Isotope,但没有运气,因为我对JS/jQuery不太擅长:/

让它在Isotope中工作会很棒,因为我希望我的网站有过滤选项(在Masnory插件中不可用).

我有很多图像通过ajax加载.我正在使用砌体和延迟加载插件来显示图像.通过一个ajax调用加载所有图像导致问题和页面卡住直到所有图像得到排列,所以我在第一个ajax加载20个图像在这个逐个ajax请求之后,在每个呼叫中​​获得10个图像并通过砌体附加追加,然后立即呼叫.

function getMorePhotos () {
    $.ajax({
            type    : "POST",
            url     : site_url+'controller/ajax_get_photos',
            data    : ,
            complete: function(response)
                    {
                        if (response.responseText != '0' )
                        {
                            getMorePhotos();
                        }                       
                    },
            success : function(response) 
                {
                    if (response == '0' || response == '') {

                    } else {
                        var temp = $(response).get();
                        temp.forEach(function( element, index ) {
                            $item = $(element);
                            $('#allPhoto1').find('ul.ins-view').append($item).masonry( 'appended', $item );
                            $item.find("img.lazy").lazyload({
                                effect : "fadeIn",
                                threshold : 100
                            });

                        });

                    }
                }
        });
}

这是第一次请求完成后的方法调用.

现在问题是:第一个图像连续闪烁,直到最后一个ajax请求完成.

我觉得这不是一个好的解决方案.任何人都可以建议吗？

我有<ul> <li>四列结构.(见图)

砌体不能处理我的动态内容,我不知道为什么.我不认为这是我身上的一个错误,至少我已经看了几个小时的代码,我找不到任何不起作用的东西.

//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 = "",
        tagsHtml = "",
        descriptionHtml = "";

    boxHtml = '' + '<div class="box" id="' + id + '">' + '<div class="boxinfo">' + '<label class="boxname"><a href="' + …