猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

瀑布流首次加载图片错位，刷新后图片定位正常

为什么首次进入页面图片会错位，但刷新之后就会好，怎么改才能使图片首次进入页面就定位正常呢

<!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>


thrmagic
浏览 4163回答 1
1回答
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JQuery