2

我正面临砌体问题，它工作得很好，现在它随机停止动画。我很困惑；我尝试了一切，但它不再是动画图片了..有没有人有解决方案？

我上传了一个带有砖石的简单网页，请看一下是否有错误。

http://www.bhinderblink.com/masonryDemo.aspx

http://www.bhinderblink.com（这个主页使用 DB、repeater 和 jquery 加载图片）

脚本

<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>
4

2 回答 2

4

交换脚本的顺序

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

必须首先加载 jQuery 才能使砌体工作：

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

编辑：

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

演示页面：

<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或将砖石应用于身体本身

 $(function () {
            $('body').masonry({
                // options
                itemSelector: '.box',
                columnWidth: 240,
                isAnimated: true
            });
        });
于 2012-12-24T07:32:08.117 回答
0 
 $(document).ready(function () {
     $('.container').imagesLoaded(function () {
      var container = document.querySelector('.container');
      var msnry = new Masonry( container, {   
            // options
            colWidth:200,
            itemSelector: '.box',
            isFitWidth: true,
            isAnimated: true,
             animationOptions: {
            duration: 1000,
            easing: 'linear',
            queue: false
          },
        isInitLayout: false
      });

      msnry._isLayoutInited = true;
      msnry.layout();
    });
    });
于 2016-08-31T08:21:03.553 回答