為什么首次進入頁面圖片會錯位，但刷新之后就會好，怎么改才能使圖片首次進入頁面就定位正常呢<!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/[email protected]/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 關注
- 4197 瀏覽
添加回答
舉報
0/150
提交
取消