<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jq.js"></script>
<script src="js/ko.js"></script>
<script src="resources/lib/core.js"></script>
<script src="resources/lib/nav.js"></script>
<style>
.container {
display: -ms-flexbox;
-ms-flex-direction: row;
/* align 设置的方向与 -ms-flex-direction 相同, pack设置的方向与-ms-flex-direction垂直
align: begin center end
pack: begin center end justify(第一个元素贴近父元素开始，最有一个元素贴近元素末尾， 其余在中间自适应
*/
-ms-flex-align: center;
-ms-flex-pack: center;
height: 800px;
width: 800px;
/* 设置子元素自动换行*/
-ms-flex-wrap: wrap;
border: 1px solid red;
}
.item {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;;
border: 1px solid deepskyblue;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
transform: scale(0.95);
}
100% {
opacity: 1;
}
}
.item:nth-child(odd) {
background: deepskyblue;
}
.item:nth-child(even) {
background: greenyellow;
transform: scale(0.8);
}
.item:hover {
animation: fadeOut 1s;
}
</style>
</head>
<body>
<div class='container' data-bind='foreach:people'>
<div class='item' data-bind='text:item'>
</div>
</div>
<script>
$(function () {
// window['vm'] = {};
/*var nav = new G.nav('resources/data/nav.json');
nav.getViewModel(function (viewModel) {
vm = viewModel;
ko.applyBindings(vm);
})
*/
var items = function (item) {
this.item = item;
}
var vm = {
people: [
new items('1'),
new items('2'),
new items('3'),
new items('4'),
new items('5'),
new items('6')
]
}
ko.applyBindings(vm);
})
</script>
</body>
</html>
