这是页面首次加载,正常显示,如图:
但是点击加载更多后,样式就出现了问题,如图:
有时候用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>