大神帮我看看:我的图片地址是。。/img 类型怎么写啊?写了不正确? 报错:GET http://127.0.0.1:8020/text/html/img/1H.ico [HTTP/1.1 404 Not Found 1ms]

来源:2-5 onscroll事件实现瀑布流布局的图片加载功能

慕仙5237505

2017-11-18 22:40

报错:GET
http://127.0.0.1:8020/text/html/img/1H.ico   [HTTP/1.1 404 Not Found 1ms]

window.onload = function(){
            //传入要操作盒子的父元素和 要操作的盒子
            waterfall("main","box");
            var da = {"data":[{"src":"1H.ico"},{"scr":"DD.ico"},{"src":"GM.ico"}]};
            window.onscroll = function(){
                if(checkScrollSlide){
                    //数据块放尾部
                    var main = document.getElementById("main");
                    for(var i=0; i<da.data.length; i++){
                        var box = document.createElement("div");
                        box.className = "box";
                        main.appendChild(box);
                        var pic = document.createElement("div");
                        pic.className = "pic";
                        box.appendChild(pic);
                        var Img = document.createElement("img");
                        Img.src= "img/" + da.data[i].src;
                        pic.appendChild(Img);
                    }
                    //再次调用给他定位
                    waterfall("main","box");
                }
            
            }
        }

function waterfall(parent,box){
            var oparent = document.getElementById(parent);  //main所有的class叫box的取出来
            var oboxs= getByClass(oparent,box);
            //console.log(obox.length);
            //计算整个页面显示列数(页面宽/box宽)
            var oboxw = oboxs[0].offsetWidth;
            var cols = Math.floor(document.documentElement.clientWidth/oboxw);
            //设置main宽
            var w = oparent.style.cssText = "width:"+oboxw *cols +"px;margin:0 auto";
            //存放每列高度的数组
            var harr = [];
            for(var i=0; i<oboxs.length; i++){
                if(i<cols){
                    //获取一组的高度
                    harr.push(oboxs[i].offsetHeight);
                }else{
                    ////因为min方法只能第一组方法,不能对很多数组,所以用apply改变this指向
                    var hmin = Math.min.apply(null,harr);
                    var index = getIndex(harr,hmin);
                    oboxs[i].style.position = "absolute";
                    oboxs[i].style.top = hmin+"px";
                    //oboxs[i].style.left = oboxw*index +"px";
                    oboxs[i].style.left = oboxs[index].offsetLeft +"px";
                    //修改原来最小值:给它再赋值(把它原来的高+后面下面那个盒子的高)146+后面图片高
                    harr[index] += oboxs[i].offsetHeight;  
                }
            }
            //console.log(harr);
        }

写回答 关注

2回答

  • 潇湘魅
    2017-11-20 15:19:49
    已采纳

     var da = {"data":[{"src":"1H.ico"},{"scr":"DD.ico"},{"src":"GM.ico"}]}; 里面的第二个src写错了!

    慕仙5237...

    哇哦,你好厉害啊,我检查了一下午,原来。。。难怪多谢辣

    2017-11-20 15:24:25

    共 1 条回复 >

  • 潇湘魅
    2017-11-20 15:21:03

     另外建议把if(checkScrollSlide)改成 if(checkScrollSlide())

瀑布流布局

瀑布流布局是网站比较流行的一种布局方式,教你实现三大方式

97759 学习 · 736 问题

查看课程

相似问题