这是页面首次加载,正常显示,如图:
但是点击加载更多后,样式就出现了问题,如图:
有时候用ie打开,点击加载更多后样式也有部分重叠,但是把页面刷新后,再点击加载更多样式就很正常了。而ff和chrome样式始终都是有问题,小弟刚开始学习这种布局,希望大神解答下,下面是代码:<%@ Page Title="" Language="C#" MasterPageFile="~/Index.master" AutoEventWireup="true" CodeFile="Ruifengimg.aspx.cs" Inherits="Ruifengimg" %><asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="css/css_Ruifengimg.css" rel="stylesheet" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script>window.onerror=function(){ return true; }</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div class="center">
<div class="menu">
<ul id="ul_menu" style="left:213px;">
<li class="menu_li"><a href="Ruifengimg.aspx?id=1">头条</a></li>
<li class="menu_li"><a href="Ruifengimg.aspx?id=2">励志</a></li>
<li class="menu_li"><a href="Ruifengimg.aspx?id=3">型男索女</a></li>
<li class="menu_li"><a href="Ruifengimg.aspx?id=4">调侃</a></li>
</ul>
<asp:ImageButton ID="imgbtn_dutu_pub" runat="server" ImageUrl="~/images/btn_my_public.png" PostBackUrl="~/Writedutu.aspx" CssClass="btn_pub" />
</div>
<div id="fallwater">
<div id="waterbox">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div id="box_child" class="div_child" style="display:block;">
<div class="article"><a href="DutuInfo.aspx?tid=<%#Eval("DuTuTypeId") %>&id=<%#Eval("id") %>"><%#BUL.Substring_str._string(Eval("dututitle"),0,12) %></a></div>
<div class="content">
<div class="div_img_descript"><%#BUL.Substring_str._string(Eval("dutudescript"),0,55) %>...</div>
<center><a href="DutuInfo.aspx?tid=<%#Eval("DuTuTypeId") %>&id=<%#Eval("id") %>"><img src='<%#Eval("dutuimageurl") %>' class="img_img" /></a></center>
<div class="dutu_user_info">
<div class="left_userimg"><img id="userimg" src='<%#Eval("img")%>' ></div>
<div class="right_info">
<span class="span_name"><%#Eval("name") %></span>
<asp:ImageButton ID="imgbtn_gz" runat="server" ImageUrl="~/images/btn_gz.png" Width="50px" Height="18px" CssClass="imgbtn_gz"/>
<span class="span_share">共发布分享:</span>
</div>
<img src="images/dutu_split_hr.png" class="img_split"/>
<div class="span_gl_com">
<span>给力</span><span style="color:#669900">(<%#Eval("dututolike") %>)</span>
<span style="margin-left:60px;">评论</span><span style="color:#fe7800">(<%#Eval("dutucommentnum") %>)</span>
</div>
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<div id="load_more" class="load_more" onclick="click_loadDutu()"><span id="span_load" style="position:absolute;top:5px;left:202px">加载更多图片</span></div>
</div>
</div>
<script type="text/javascript">
function dutuCode(id,title,descript,imgurl,tid,photo,name,tolike,cnum) {
var code="<div class=\"div_child\"><div class=\"article\"><a href=\"DutuInfo.aspx?tid="+tid+"&id="+id+"\">"+Sbustring_str(title,0,12)+"</a></div><div class=\"content\">"+
"<div class=\"div_img_descript\">"+Sbustring_str(descript,0,55)+"..."+"</div> <center><a href=\"DutuInfo.aspx?tid="+tid+"&id="+id+"\"><img src='"+imgurl+"' class=\"img_img\" /></a></center>"+
"<div class=\"dutu_user_info\"><div class=\"left_userimg\"><img id=\"userimg\" src='../"+photo+"' style=\"width:50px;height:50px;\"></div>"+
"<div class=\"right_info\"><span class=\"span_name\">"+name+"</span>"+
"<img id=\"imgbtn_gz\" src=\"images/btn_gz.png\" style=\"width:50px;height:18px;\" class=\"imgbtn_gz\"/>"+
"<span class=\"span_share\">共发布分享:</span></div><img src=\"images/dutu_split_hr.png\" class=\"img_split\"/><div class=\"span_gl_com\">"+
"<span>给力</span><span style=\"color:#669900\">("+tolike+")</span>"+
"<span style=\"margin-left:60px;\">评论</span><span style=\"color:#fe7800\">("+cnum+")</span>"+
"</div></div></div></div>";
return code;
} function click_loadDutu() {
getPage();
$.ajax({
type: "POST",
url: "Index.ashx?typeid="+<%=get_typeid() %>+"&pageindex="+page+"",
dataType: "html",
data: "method=dutu",
success: function (msg) {
var box = $("#waterbox");
if (msg == null || msg == "") {
$("#span_load").innerHtml="已经是最后一页了";
} else {
try {
msg = msg.replace(/\]\[/g, "],[");
msg = msg.replace(/\r\n/g, "");
arr = eval('new Array(' + msg + ')');
for (j = 0; j < arr.length; j++) { box.append(dutuCode(arr[j][0].dutuid,arr[j][0].title,arr[j][0].dutudescript,arr[j][0].imgurl,arr[j][0].tid,
arr[j][0].dutuuserimg,arr[j][0].dutuname,arr[j][0].tolike,arr[j][0].cnum));
}
} catch (e) {
alert("errorinfo:" +e);
}
waterfall();
}
}
});
}
var t=0;
var page = 10;var a=1;
function getPage() {
if (a < $("#HiddenField1").val()) {
page = page;
} else {
page=a*10;
}
a++;
return page;
}
/*fallwater*/
function waterfall() {
var margin = 10;
var li = $(".div_child");
try {
var li_W = li[0].offsetWidth + margin;
} catch (e) {
$("#load_more").hide();
alert("该分类没有消息!");
}
var h = [];
var n = 4;
for (var i = 0; i < li.length; i++) {
li_H = li[i].offsetHeight;
if (i < n) {
h[i] = li_H;
li.eq(i).css("top", 0);
li.eq(i).css("left", i * li_W);
}
else {
min_H = Math.min.apply(null, h);
minKey = getarraykey(h, min_H);
h[minKey] += li_H + margin;
li.eq(i).css("top", min_H + margin);
li.eq(i).css("left", minKey * li_W);
}
}
document.getElementById("waterbox").style.height = h.max() + "px";
}
Array.prototype.max = function () {
var maxH = 0;
for (var i = 0; i < this.length; i++) {
maxH = Math.max(maxH, this[i]);
}
return maxH;
}
function getarraykey(s, v) { for (k in s) { if (s[k] == v) { return k; } } }
$(document).ready(waterfall());
</script>
<asp:HiddenField ID="HiddenField1" runat="server" Value="1"/>
</asp:Content>
但是点击加载更多后,样式就出现了问题,如图:
有时候用ie打开,点击加载更多后样式也有部分重叠,但是把页面刷新后,再点击加载更多样式就很正常了。而ff和chrome样式始终都是有问题,小弟刚开始学习这种布局,希望大神解答下,下面是代码:<%@ Page Title="" Language="C#" MasterPageFile="~/Index.master" AutoEventWireup="true" CodeFile="Ruifengimg.aspx.cs" Inherits="Ruifengimg" %><asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="css/css_Ruifengimg.css" rel="stylesheet" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script>window.onerror=function(){ return true; }</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div class="center">
<div class="menu">
<ul id="ul_menu" style="left:213px;">
<li class="menu_li"><a href="Ruifengimg.aspx?id=1">头条</a></li>
<li class="menu_li"><a href="Ruifengimg.aspx?id=2">励志</a></li>
<li class="menu_li"><a href="Ruifengimg.aspx?id=3">型男索女</a></li>
<li class="menu_li"><a href="Ruifengimg.aspx?id=4">调侃</a></li>
</ul>
<asp:ImageButton ID="imgbtn_dutu_pub" runat="server" ImageUrl="~/images/btn_my_public.png" PostBackUrl="~/Writedutu.aspx" CssClass="btn_pub" />
</div>
<div id="fallwater">
<div id="waterbox">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div id="box_child" class="div_child" style="display:block;">
<div class="article"><a href="DutuInfo.aspx?tid=<%#Eval("DuTuTypeId") %>&id=<%#Eval("id") %>"><%#BUL.Substring_str._string(Eval("dututitle"),0,12) %></a></div>
<div class="content">
<div class="div_img_descript"><%#BUL.Substring_str._string(Eval("dutudescript"),0,55) %>...</div>
<center><a href="DutuInfo.aspx?tid=<%#Eval("DuTuTypeId") %>&id=<%#Eval("id") %>"><img src='<%#Eval("dutuimageurl") %>' class="img_img" /></a></center>
<div class="dutu_user_info">
<div class="left_userimg"><img id="userimg" src='<%#Eval("img")%>' ></div>
<div class="right_info">
<span class="span_name"><%#Eval("name") %></span>
<asp:ImageButton ID="imgbtn_gz" runat="server" ImageUrl="~/images/btn_gz.png" Width="50px" Height="18px" CssClass="imgbtn_gz"/>
<span class="span_share">共发布分享:</span>
</div>
<img src="images/dutu_split_hr.png" class="img_split"/>
<div class="span_gl_com">
<span>给力</span><span style="color:#669900">(<%#Eval("dututolike") %>)</span>
<span style="margin-left:60px;">评论</span><span style="color:#fe7800">(<%#Eval("dutucommentnum") %>)</span>
</div>
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<div id="load_more" class="load_more" onclick="click_loadDutu()"><span id="span_load" style="position:absolute;top:5px;left:202px">加载更多图片</span></div>
</div>
</div>
<script type="text/javascript">
function dutuCode(id,title,descript,imgurl,tid,photo,name,tolike,cnum) {
var code="<div class=\"div_child\"><div class=\"article\"><a href=\"DutuInfo.aspx?tid="+tid+"&id="+id+"\">"+Sbustring_str(title,0,12)+"</a></div><div class=\"content\">"+
"<div class=\"div_img_descript\">"+Sbustring_str(descript,0,55)+"..."+"</div> <center><a href=\"DutuInfo.aspx?tid="+tid+"&id="+id+"\"><img src='"+imgurl+"' class=\"img_img\" /></a></center>"+
"<div class=\"dutu_user_info\"><div class=\"left_userimg\"><img id=\"userimg\" src='../"+photo+"' style=\"width:50px;height:50px;\"></div>"+
"<div class=\"right_info\"><span class=\"span_name\">"+name+"</span>"+
"<img id=\"imgbtn_gz\" src=\"images/btn_gz.png\" style=\"width:50px;height:18px;\" class=\"imgbtn_gz\"/>"+
"<span class=\"span_share\">共发布分享:</span></div><img src=\"images/dutu_split_hr.png\" class=\"img_split\"/><div class=\"span_gl_com\">"+
"<span>给力</span><span style=\"color:#669900\">("+tolike+")</span>"+
"<span style=\"margin-left:60px;\">评论</span><span style=\"color:#fe7800\">("+cnum+")</span>"+
"</div></div></div></div>";
return code;
} function click_loadDutu() {
getPage();
$.ajax({
type: "POST",
url: "Index.ashx?typeid="+<%=get_typeid() %>+"&pageindex="+page+"",
dataType: "html",
data: "method=dutu",
success: function (msg) {
var box = $("#waterbox");
if (msg == null || msg == "") {
$("#span_load").innerHtml="已经是最后一页了";
} else {
try {
msg = msg.replace(/\]\[/g, "],[");
msg = msg.replace(/\r\n/g, "");
arr = eval('new Array(' + msg + ')');
for (j = 0; j < arr.length; j++) { box.append(dutuCode(arr[j][0].dutuid,arr[j][0].title,arr[j][0].dutudescript,arr[j][0].imgurl,arr[j][0].tid,
arr[j][0].dutuuserimg,arr[j][0].dutuname,arr[j][0].tolike,arr[j][0].cnum));
}
} catch (e) {
alert("errorinfo:" +e);
}
waterfall();
}
}
});
}
var t=0;
var page = 10;var a=1;
function getPage() {
if (a < $("#HiddenField1").val()) {
page = page;
} else {
page=a*10;
}
a++;
return page;
}
/*fallwater*/
function waterfall() {
var margin = 10;
var li = $(".div_child");
try {
var li_W = li[0].offsetWidth + margin;
} catch (e) {
$("#load_more").hide();
alert("该分类没有消息!");
}
var h = [];
var n = 4;
for (var i = 0; i < li.length; i++) {
li_H = li[i].offsetHeight;
if (i < n) {
h[i] = li_H;
li.eq(i).css("top", 0);
li.eq(i).css("left", i * li_W);
}
else {
min_H = Math.min.apply(null, h);
minKey = getarraykey(h, min_H);
h[minKey] += li_H + margin;
li.eq(i).css("top", min_H + margin);
li.eq(i).css("left", minKey * li_W);
}
}
document.getElementById("waterbox").style.height = h.max() + "px";
}
Array.prototype.max = function () {
var maxH = 0;
for (var i = 0; i < this.length; i++) {
maxH = Math.max(maxH, this[i]);
}
return maxH;
}
function getarraykey(s, v) { for (k in s) { if (s[k] == v) { return k; } } }
$(document).ready(waterfall());
</script>
<asp:HiddenField ID="HiddenField1" runat="server" Value="1"/>
</asp:Content>
应该是你的这里,试试<div id="box_child" class="div_child" style="display:block;">
....内容...
<div style="clear:both;"></div>
</div>div_child高度应该是 100%