加载的时候会先加载图一然后渲染到图二，刷新的时候就会闪一下，看起来就很怪，如何让它刷新的时候直接加载到图二，不会闪烁那一下？<!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);})
添加回答
举报
0/150
提交
取消