weixin_43995433 2019-01-08 13:14 采纳率: 0%
浏览 715

【新人求教】用写jQuery瀑布流定位布局,第一次打开网页布局正常,之后每次刷新图片定位都会出现不同的错乱

图片说明图片说明图片说明

//瀑布流
function waterfall(wrap,box){
    //获取可显示的列数
    var boxwidth=box.eq(0).width()+20,
        windowwidth=$(window).width(),
        colsnumber=Math.floor(windowwidth/boxwidth);
    //设置容器宽度
    wrap.width(boxwidth*colsnumber)
    //数组存储每一个高度
    var i=0,
        colsheight=new Array();
    for(i=0;i<box.length;i++){
        if(i<colsnumber){
            colsheight[i]=box.eq(i).height()+20;
        }
        else{
            //找到目前最小高度
            var I=0,
                minindex=0,
                minheight=colsheight[0];

            for(I=0;I<colsheight.length;I++){
                colsheight[I]<minheight?minheight=colsheight[I]:minheight;
            }
            //找到最小高度的box的索引
            for(I=0;I<colsheight.length;I++){
                colsheight[I]==minheight?minindex=I:minindex;
            }
            //设置定位
            var leftvalue=box.eq(minindex).position().left,
                topvalue=minheight;
            box.eq(i).css({
                "position":"absolute",
                "top":topvalue+"px",
                "left":leftvalue+"px"
            })
            //更新数组中的高度值
            colsheight[minindex]+=box.eq(i).height()+20;
        }
    }
}


$(document).ready(function(){
    var wrap=$("#wrap"),
        box=$(".boxes");
    waterfall(wrap,box);
  • 写回答

1条回答 默认 最新

  • zt13502162671 2019-01-30 14:23
    关注

    图片还没有 加载完毕就执行了js的方法

    评论

报告相同问题?

悬赏问题

  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥30 用arduino开发esp32控制ps2手柄一直报错
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿