jq瀑布流给定容器宽度后，刷新时会闪烁
加载的时候会先加载图一然后渲染到图二，刷新的时候就会闪一下，看起来就很怪，如何让它刷新的时候直接加载到图二，不会闪烁那一下？
<!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);})浏览 1167回答 1