加載的時(shí)候會(huì)先加載圖一然后渲染到圖二，刷新的時(shí)候就會(huì)閃一下，看起來(lái)就很怪，如何讓它刷新的時(shí)候直接加載到圖二，不會(huì)閃爍那一下？<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>waterFall</title>
????<link?rel="stylesheet"?type="text/css"?href="style/style.css">
</head>
<body>
????<div?class="allDiv">
????<div?class="childDiv1">1</div><div?class="childDiv2">2</div><div?class="childDiv1">1</div><div?class="childDiv1">1</div><div?class="childDiv2">2</div><div?class="childDiv3">3</div><div?class="childDiv2">2</div><div?class="childDiv3">3</div><div?class="childDiv1">1</div><div?class="childDiv1">1</div><div?class="childDiv2">2</div><div?class="childDiv1">1</div><div?class="childDiv3">3</div><div?class="childDiv1">1</div><div?class="childDiv3">3</div><div?class="childDiv1">1</div><div?class="childDiv1">1</div><div?class="childDiv3">3</div><div?class="childDiv2">2</div><div?class="childDiv1">1</div>
????</div>
????<script?type="text/javascript"?src="jquery/jquery-3.4.0.js"></script>
????<script?type="text/javascript"?src="script/script.js"></script>
</body>
</html>*{ margin:0; padding:0;}
body{ min-width:?500px;}
a{ text-decoration:?none; color:#ccc;}
.allDiv{ border:1px?solid?red; width:?auto; height:?auto; margin:30px?auto; padding:10px; overflow:?hidden;}
.allDiv>div{ text-align:?center; float:left; border:1px?solid?green; margin:0?10px; width:80px;}
//給子盒子設(shè)置不同高度
.childDiv1{ height:?60px; line-height:?60px;}
.childDiv2{ height:?100px; line-height:?100px;}
.childDiv3{ height:?80px; line-height:?80px;}//?判斷當(dāng)前寬度，給allDiv寬度
function?setwidth(windowsWidth,?minRow){ $('.allDiv').css({'width':minRow*102+"px"});}
$(function(event){ var?windowsWidth?=?$(window).width(); var?minRow?=?Math.floor((windowsWidth-60)/102); setwidth(windowsWidth,?minRow);})
jq瀑布流給定容器寬度后，刷新時(shí)會(huì)閃爍
holy_yakutsk
2019-04-24 16:37:02