版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/rencaishigepi/article/details/78205494
始终不够聪明，写个setInterval都好费劲，心酸不说了，上菜~
html和css是相同的，只有js不同
HTML
<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<meta content="width=device-width,user-scalable=no,initial-scale=1.0" name="viewport">
<title>开锁展示</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="index.css">
</head>
<body ng-controller="ctrlDemo">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="wrap" id="wrap">
<div class="box box1">
<div class="mask"></div>
<ul></ul>
<div class="btn btn-success hidden" ng-click="open($event)">打开</div>
</div>
<div class="box box2">
<div class="mask"></div>
<ul></ul>
<div class="btn btn-success hidden" ng-click="open($event)">打开</div>
</div>
<div class="box box3">
<div class="mask"></div>
<ul></ul>
<div class="btn btn-success hidden" ng-click="open($event)">打开</div>
</div>
<div class="box box4">
<div class="mask"></div>
<ul></ul>
<div class="btn btn-success hidden" ng-click="open($event)">打开</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="side">
<ul>
<li ng-repeat="p in persons">
<img class="headImg" ng-src="{{p.headimg_url}}" />
<p class="name" ng-bind="p.nickname"></p>
</li>
</ul>
</div>
<button class="btn btn-info" ng-click="start()">开始</button>
</div>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.5.6/angular.js"></script>
<script src="index.js"></script>
</html>css
ul,ol{padding-left:0;margin-bottom:0;list-style:none;}
.container{width:1200px;margin-top:50px;}
.col-md-9,.col-md-3{padding-right:0;padding-left:0;position:relative;}
/* 左侧 */
.box{float:left;width:50%;height:300px;position: relative;}
.mask{width:100%;height:100%;position:absolute;top:0;left:0;background-color: #eee;}
.box > ul{width: 100%;position: relative;}
.box > ul > li{float: left;position: relative;height: 100%;}
.box >ul > li > img{width: 100%;height: 100%;border-radius: 50%;position: absolute;top:0;left:0;}
.box > .btn{position: relative;}
/* 右侧 */
.side{width: 100%;overflow: hidden;background-color: pink;}
.side li{float: left;width: 20%;height: 50px;margin-bottom: 15px;}
.side li > .headImg{width: 30px;height: 30px;border-radius: 50%;}
.side li > .name{font-size: 12px;margin-bottom: 0px;}
统一的js
app.controller('ctrlDemo', ['$scope', '$interval', '$http', '$location', function($scope, $interval, $http, $location) {
var eachNum, uls = document.querySelectorAll(".box ul");
$scope.start......
}]);头像一个个的出（代码只优化到这了）
$scope.start = function(){
var count = 0, i = 0;
function appendEle(ul) {
ul.css("height", ul.width() / eachNum);
var li = $("<li></li>"),
img = $("<img src='" + $scope.persons[count].headimg_url + "'/>");
li.css("width", ul.width() / eachNum);
$(li).append(img);
ul.append(li);
}
var d = setInterval(function() {
if ($(uls[0]).children().length < eachNum) {
appendEle($(uls[0]));
} else if ($(uls[0]).children().length === eachNum && $(uls[1]).children().length < eachNum) {
appendEle($(uls[1]));
} else if ($(uls[0]).children().length === eachNum && $(uls[1]).children().length === eachNum && $(uls[2]).children().length < eachNum) {
appendEle($(uls[2]));
}else if ($(uls[0]).children().length === eachNum && $(uls[1]).children().length === eachNum && $(uls[2]).children().length === eachNum && $(uls[3]).children().length < eachNum) {
appendEle($(uls[3]));
} else if ($(uls[0]).children().length == eachNum && $(uls[1]).children().length == eachNum && $(uls[2]).children().length === eachNum && $(uls[3]).children().length === eachNum) {
clearInterval(d);
}
count++;
}, 500);
}一组一组的出
$scope.start = function(){
var count = 0, i = 0;
function appendEle(ul) {
ul.css("height", ul.width() / eachNum);
for(var j = 0; j < eachNum; j++) {
var li = $("<li></li>"),
img = $("<img src='" + $scope.persons[count].headimg_url + "'/>");
li.css("width", ul.width() / eachNum);
$(li).append(img);
ul.append(li);
count++;
}
}
var end = setInterval(function(){
if(i > 3){
window.clearInterval(end);
return false;
}
appendEle($(uls[i]));
i++;
},500);
}每组同时各出一个
$scope.start = function() {
var count = 0, i = 0;
angular.forEach(uls, function(ul) {
$(ul).css("height", $(ul).width()/ eachNum);
createEle(ul);
});
function createEle(ul) {
var timer = setInterval(function(){
if($(ul).children().length < eachNum) {
var li = $("<li></li>"),
img = $("<img src='" + $scope.persons[count].headimg_url + "'/>");
li.css("width", $(ul).width() / eachNum);
$(li).append(img);
$(ul).append(li);
} else {
clearInterval(timer);
}
count++;
}, 500);
}
}