砖石不再动画了 [英] masonry not animating anymore

问题描述

我面临砌筑问题，它工作得很完美，现在它随机停止动画。
我非常困惑;我尝试了一切，但它不再是动画照片..
有没有人有解决方案？

I am facing problem with masonry, it was working perfect, now it random stop animating. i am so much confuse; i try everything but it is not animating pics any more.. is there anyone with solution?

我上传了一个带砖石的简单网页，请看看查找错误。

I uploaded a simple webpage with masonry, Please take a look to find error.

http：// www。 bhinderblink.com/masonryDemo.aspx

http：/ /www.bhinderblink.com （此主页使用DB，转发器和jquery加载图片）

http://www.bhinderblink.com (this main page working with DB, repeater and jquery to load pictures)

脚本

<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>

<script type="text/javascript">

    $(function () {
        $('#container').masonry({
            // options
            itemSelector: '.box',
            columnWidth: 240,
            isAnimated: true
        })
    });


</script>

正文

<div id="container">
    <div class="box">
        <div id="imageDiv1">
            LoadImage...1<br />
            <asp:Image runat="server" ID="img1"  ImageUrl="~/pic/jas/pic10.jpg" />
        </div>
    </div>
    <div class="box">
        <div id="imageDiv2">
            LoadImage...2<br />
            <asp:Image runat="server" ID="Image2" ImageUrl="~/pic/jas/pic11.jpg" />
        </div>
    </div>
    <div class="box">
        <div id="imageDiv3">
            LoadImage...3<br />
            <asp:Image runat="server" ID="Image1" ImageUrl="~/pic/jas/pic12.jpg" />
        </div>
    </div>
    <div class="box">
        <div id="imageDiv4">
            LoadImage...4<br />
            <asp:Image runat="server" ID="Image3" ImageUrl="~/pic/jas/pic13.jpg" />
        </div>
    </div>
    <div class="box">
        <div id="imageDiv5">
            LoadImage...5<br />
            <asp:Image runat="server" ID="Image4" ImageUrl="~/pic/jas/pic14.jpg" />
        </div>
    </div>
    <div class="box">
        <div id="imageDiv6">
            LoadImage...6<br />
            <asp:Image runat="server" ID="Image5" ImageUrl="~/pic/jas/pic15.jpg" />
        </div>
    </div>
</div>

主页正文

<form id="form1" runat="server">
<div id="topBanner">
</div>
<asp:Repeater ID="rptCustomers" runat="server">
    <HeaderTemplate>
    </HeaderTemplate>
    <ItemTemplate>
        <div id="container">
            <div class="box">                   
                <asp:Image ID="zzz" runat="server" ImageUrl='<%# "~/pic/jas/" + Eval("pic_name") + ".jpg" %>' />
            </div>
        </div>
    </ItemTemplate>
    <FooterTemplate>
    </FooterTemplate>
</asp:Repeater>
<div id="imageDiv">
    LoadImage...
</div>
<img id="loader" alt="" src="loading.gif" style="display: none" />
</form>

主页脚本

<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />

<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>

<%--masonry--%>
<script type="text/javascript">

    $(function () {
        $('#container').masonry({
            // options
            itemSelector: '.box',
            columnWidth: 240,
            isAnimated: true
        });
    });


</script>
<%--Pagging--%>
<script type="text/javascript">
    var pageIndex = 1;
    var pageCount;
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {

            GetRecords();
        }
    });
    function GetRecords() {
        pageIndex++;
        if (pageIndex == 2 || pageIndex <= pageCount) {
            $("#loader").show();
            $.ajax({
                type: "POST",
                url: "/index.aspx/GetCustomers",
                data: '{pageIndex: ' + pageIndex + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert("failur");
                    alert(response.d);
                },
                error: function (response) {
                    alert("error");
                    alert(response.d);
                }
            });
        }
    }
    function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);

        pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());

        var pic_infoVar = xml.find("pic_info");

        pic_infoVar.each(function () {
            var customer = $(this);
            $("#imageDiv").append("<img id='theImg' src='/pic/jas/" + customer.find("pic_name").text() + ".jpg" + "'/>");
        });
        $("#loader").hide();
    }

</script>

推荐答案

交换脚本的顺序

<script src="js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>

首先需要加载jQuery才能使砌体工作：

jQuery has to be loaded first for masonry to work:

<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>

修改：

您的网站似乎已将砌体应用于每个容器类，这似乎与您的演示页不同。

Your site seems to have masonry applied to every container class, which seems to be different then your demo page.

演示页：

<div id="container">
    <div class="box">
        <div id="imageDiv1">
            LoadImage...1<br />
            <img id="img1" src="pic/jas/pic10.jpg" />
        </div>
    <div class="box">
        <div id="imageDiv2">
            LoadImage...2<br />
            <img id="Image2" src="pic/jas/pic11.jpg" />
        </div>
    </div>
</div>

主页：

    <div id="container">
        <div class="box">
            <img id="rptCustomers_zzz_0" src="pic/jas/pic1.jpg" />
        </div>
    </div>
    <div id="container">
        <div class="box">
            <img id="rptCustomers_zzz_1" src="pic/jas/pic2.jpg" />
        </div>
    </div>

所以添加另一个容器以包含 .containers 或将砖石应用于身体本身

So add another container to contain the .containers or apply masonry to the body itself

 $(function () {
            $('body').masonry({
                // options
                itemSelector: '.box',
                columnWidth: 240,
                isAnimated: true
            });
        });

这篇关于砖石不再动画了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！