<!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>