加載的時候會先加載圖一然后渲染到圖二，刷新的時候就會閃一下，看起來就很怪，如何讓它刷新的時候直接加載到圖二，不會閃爍那一下？<!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;}
//給子盒子設置不同高度
.childDiv1{ height:?60px; line-height:?60px;}
.childDiv2{ height:?100px; line-height:?100px;}
.childDiv3{ height:?80px; line-height:?80px;}//?判斷當前寬度，給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瀑布流給定容器寬度后，刷新時會閃爍
holy_yakutsk
2019-04-24 16:37:02