为什么首次进入页面图片会错位，但刷新之后就会好，怎么改才能使图片首次进入页面就定位正常呢<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><link href="bootstrap.min.css" rel="stylesheet"><link href="font-awesome.min.css" rel="stylesheet"><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0"><style type="text/css">body{background-color:#ededed;}.patr1,.part2{background-color:#fff;}.toutu{width:100%;}.col-xs-12{padding-left: 0!important;padding-right: 0!important;}.search{border:1px solid #9b9b9b;font-size: 16px;width:92%;margin-left: auto;margin-right: auto;margin-top: 20px;}.toupiaozq{color:#9b9b9b;background-color:#fff;}button{border:0!important;}.pic_box{margin-left: -15px!important;margin-right: -15px!important;padding-right:10px;}#main{position: relative;margin-bottom:20px!important;}.box{float: left;padding:10px 0 0 10px!important;} .pic{border:1px solid #d1d1d1;background-color: #fff;}.pic img{width:100%;height: auto;}.orange{color:#FE8124;font-size: 20px;}.border_right{border-right: 1px solid #9b9b9b;}.toupiao_nav{color: #565656;font-size: 16px;padding-top:15px;padding-bottom:10px;border-bottom: 3px solid #fff;text-align: center;}.active_border{border-bottom: 3px solid #FF5001;}.login_btn{color:#fff;margin-top: 20px;width:92%;margin-left: auto;margin-right: auto;font-size: 22px;background-color: #FF5001;margin-bottom: 20px;}.your_name{color:#1b1b1b;font-size:16px;margin-top:10px;text-indent:10px;}.toupiao_num{color:#9b9b9b!important;margin-top: 6px;color:#1b1b1b;font-size:16px;text-indent:10px;}.toupiao_btn{color:#FF5001;margin:10px;border:1px solid #ececec;font-size: 20px;text-align: center;padding-right: 10px;line-height: 2em;border-radius: 3px;}.nav_box{padding-left: 15px;padding-right: 15px;background-color:#fff;}.loading_bar{width:100%; text-align:center;height:20px; bottom:0px;}#loading_bar2{height:50px; bottom:0px;width:100%;background-color:#ededed;margin-left:auto;margin-right:auto;}.hidden{display:none;}.wraning{color:#c2c2c2;padding-top:20px;padding-left:15px;}.tobottom{height:50px;width:100%;}.page{background-color: #ededed;}.loader{ margin: 0 0 2em; height: 100px; width: 20%; text-align: center; padding: 1em; margin: 0 auto 1em; display: inline-block; vertical-align: top;}svg path,svg rect{ fill: #9b9b9b;}/**#loading_bar{position: absolute;}.loading_bar2{position: absolute;}*/</style></head><body><div class="container page"><div class="row part1"><div><img src="img/zixun_header.png" alt="全家福"></div></div><div class="row part2"><div class="form-group has-feedback"> <label class="control-label sr-only" for="inputSuccess2">Input with success</label> <input type="text" class="search form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status" placeholder="搜名字或编号"> <span class="glyphicon form-control-feedback" aria-hidden="true"></span> </div></div><div class="row text-center toupiaozq"><div class="col-xs-4 border_right"><p>3</p><p>已报名</p></div><div class="col-xs-4 border_right"><p>104</p><p>投票人数</p></div><div><p>637</p><p>访问量</p></div></div><div class="row part2"><div><button class="btn btn-block btn-lg login_btn">登录</button></div></div><div class="row nav_box"><div class="col-xs-4 toupiao_nav active_border">最新赛事</div><div class="col-xs-4 toupiao_nav">投票排行</div><div class="col-xs-4 toupiao_nav">Top300</div></div><div class="row pic_box" id="main"> <div class="col-xs-6 box"> <div> <img src="img/zixun_header.png"> <P>无敌掌门狗史瑞克</P> <p><span>1266</span><span>票</span></p> <div>投票</div> </div></div> <div class="col-xs-6 box"> <div> <img src="img/zixun.png"> <P>无敌掌门狗史瑞克</P> <p><span>1266</span><span>票</span></p> <div>投票2</div> </div> </div><!-- <div class="col-xs-6 box"> <div> <img src="img/zixun_header.png"> <P>无敌掌门狗史瑞克</P> <p><span>1266</span><span>票</span></p> <div>投票</div> </div></div> <div class="col-xs-6 box"> <div> <img src="img/zixun.png"> <P>无敌掌门狗史瑞克</P> <p><span>1266</span><span>票</span></p> <div>投票2</div> </div> </div> --></div><div class="row loading_bar"><div class="loader loader--style1 hidden" title="0" id="loading_bar1"> <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve"> <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/> <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z"> <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1s" repeatCount="indefinite"/> </path> </svg></div><div class="col-xs-12 text-center hidden" id="loading_bar2"><div><img class="toutu" src="img/tobottom_line.png"></div><div class="col-xs-4 wraning"></div><div><img src="img/tobottom_line.png"></div></div></div></div><!-- container --><script type="text/javascript" src="jquery.min.js"></script><script src="Masonry.js"></script><script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script><script type="text/javascript">var $boxs=$("#main>div");var w=$boxs.eq(0).outerWidth();var cols=Math.floor($(window).width()/w);$("#main").width(w*cols).css('margin','0 auto 20px auto');var hArr=[];var boxNum = 0;//瀑布流内容个数function waterfall(){$boxs.each(function(index,value){boxNum += 1;var minH=null;var minHIndex=null;var h=$boxs.eq(index).outerHeight();if(index<cols){hArr[index]=h;if (index==0){$(value).css({'position':'absolute', 'top':minH + 'px', 'left':'0'})}else{$(value).css({'position':'absolute', 'top':minH + 'px', 'left':w+'px'})}}else{minH=Math.min.apply(null,hArr);minHIndex=$.inArray(minH,hArr);$(value).css({'position':'absolute','top':minH+'px','left':minHIndex*w+'px'})}hArr[minHIndex]+=$boxs.eq(index).outerHeight();// alert(hArr[minHIndex]);$("#main").height(minH + $(this).height());})}function waterfall2(){// alert("waterfall2");var $boxs1=$("#main>div");$boxs1.each(function(index,value){// alert(boxNum + ":" + index);if(parseInt(boxNum) == index){var minH=Math.min.apply(null,hArr);var minHIndex=$.inArray(minH,hArr);// alert(minH);$(value).css({'position':'absolute','top':minH+'px','left':minHIndex*w+'px'})hArr[minHIndex]+=$boxs1.eq(index).outerHeight();boxNum += 1;$("#main").height(minH + $(this).height());}})}$(window).on("load",function(){waterfall();$("#loading_bar1").removeClass("hidden");var dataInt={"data":[{"src":'7.jpg',"name":"无敌掌门狗史瑞克","number":"22"},{"src":'8.jpg',"name":"无敌掌门狗史瑞克","number":"2555"},{"src":'9.jpg',"name":"无敌掌门狗史瑞克","number":"2233"},{"src":'10.jpg',"name":"无敌掌门狗史瑞克","number":"225"},{"src":'11.jpg',"name":"无敌掌门狗史瑞克","number":"229"},{"src":'7.jpg',"name":"无敌掌门狗史瑞克","number":"22"},{"src":'8.jpg',"name":"无敌掌门狗史瑞克","number":"2555"},{"src":'9.jpg',"name":"无敌掌门狗史瑞克","number":"2233"},{"src":'10.jpg',"name":"无敌掌门狗史瑞克","number":"225"},{"src":'11.jpg',"name":"无敌掌门狗史瑞克","number":"229"}]};/* var dataInt={"data":[{"src":'7.jpg',"name":"无敌掌门狗史瑞克","number":"22"}]}; *//* var src = dataInt.data[0].src; */var loading=false;$(window).on('scroll',function(){if(($(window).scrollTop()+$(window).height())>=$(document).height()){$("#loading_bar1").addClass("hidden"); if(loading==false){loading=true;$("#loading_bar").removeClass("hidden");$.each(dataInt.data,function(key,value){var oBox=$('<div>').addClass("col-xs-6 box").appendTo($('#main'));var oPic=$('<div>').addClass('pic').appendTo($(oBox));var oImg=$('<img>').attr('src','img/'+$(value).attr('src')).appendTo($(oPic));var oName=$('<p>').addClass('your_name').html($(value).attr('name')).appendTo($(oPic));var oNumber=$('<p>').addClass('toupiao_num').html("<span>票</span>").appendTo($(oPic));var ospanNumber=$('<span>').html($(value).attr('number')).prependTo($(oNumber));var oTouPiao=$('<div>').addClass('toupiao_btn').html("投票").appendTo($(oPic));waterfall2();})$("#loading_bar2").removeClass("hidden");//waterfall();$(".wraning").html("已经到底了");// $('<div>').addClass('col-xs-12 text-center loading_bar2').html("已经到底了").appendTo($('#main')); }}})})</script></body></html>
1 回答
- 1 回答
- 0 关注
- 4162 浏览
添加回答
举报
0/150
提交
取消