砖石不再动画了 [英] 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屋!