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);})

holy_yakutsk

浏览 1167回答 1

1回答

随时随地看视频慕课网APP