私は石積みの問題に直面しています、それは完璧に機能していました、今それはランダムにアニメーションを停止します。私はとても混乱しています。私はすべてを試しますが、それはもう写真をアニメーション化していません..解決策を持っている人はいますか？
石積みの簡単なウェブページをアップロードしました。エラーを見つけるために見てください。
http://www.bhinderblink.com/masonryDemo.aspx
http://www.bhinderblink.com（このメインページは、DB、リピーター、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>