<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兼容移动端的响应式瀑布流-Amals技术博客</title>
<script type="text/javascript" src="http://www.amals.org/zb_system/script/common.js"></script>
<style type="text/css">
.grid {position: relative;margin: 0 auto;width: 98%;}
.grid-item{position: absolute;top: 0;left: 0;width: 180px;}
.grid-item img{width: 180px;border:1px solid #333;border-radius:3px;}
@media (max-width: 600px) {
.grid-item {width: 120px;}
.grid-item img {width: 120px;}
}
</style>
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="grid">
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/3.jpeg" /></div>
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/2.jpeg" /></div>
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/1.jpeg" /></div>
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/java10.png" /></div>
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/java9.png" /></div>
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/java8.png" /></div>
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/java7.png" /></div>
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/java6.png" /></div>
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/java5.png" /></div>
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/java4.png" /></div>
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/java3.png" /></div>
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/java2.png" /></div>
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/java1.png" /></div>
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/201606221466565798842288.png" /></div>
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/201606221466528183703067.png" /></div>
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/201606221466525571912525.png" /></div>
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/201606221466525171290951.png" /></div>
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/201606211466523548572787.png" /></div>
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/201606211466523779487012.png" /></div>
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/201606211466523835767888.png" /></div>
<div class="grid-item"><img src="http://www.amals.org/zb_users/upload/2016/06/201606221466525083482513.png" /></div>
</div>
<script>
(function(exports){
function minigrid(containerSelector, itemSelector, gutter, animate, done) {
var forEach = Array.prototype.forEach;
var containerEle = document.querySelector(containerSelector);
var itemsNodeList = document.querySelectorAll(itemSelector);
gutter = gutter || 6;
containerEle.style.width = '';
var containerWidth = containerEle.getBoundingClientRect().width;
var firstChildWidth = itemsNodeList[0].getBoundingClientRect().width + gutter;
var cols = Math.max(Math.floor((containerWidth - gutter) / firstChildWidth), 1);
var count = 0;
containerWidth = (firstChildWidth * cols + gutter) + 'px';
containerEle.style.width = containerWidth;
for (var itemsGutter = [], itemsPosX = [], g = 0; g < cols; g++) {
itemsPosX.push(g * firstChildWidth + gutter);
itemsGutter.push(gutter);
}
forEach.call(itemsNodeList, function(item){
var itemIndex = itemsGutter.slice(0).sort(function (a, b) {
return a - b;
}).shift();
itemIndex = itemsGutter.indexOf(itemIndex);
var posX = itemsPosX[itemIndex];
var posY = itemsGutter[itemIndex];
var transformProps = [
'webkitTransform',
'MozTransform',
'msTransform',
'OTransform',
'transform'
];
if (!animate) {
forEach.call(transformProps, function(transform){
item.style[transform] = 'translate(' + posX + 'px,' + posY + 'px)';
});
}
itemsGutter[itemIndex] += item.getBoundingClientRect().height + gutter;
count = count + 1;
if (animate) {
return animate(item, posX, posY, count);
}
});
var containerHeight = itemsGutter.slice(0).sort(function (a, b) {
return a - b;
}).pop();
containerEle.style.height = containerHeight + 'px';
if (typeof done === 'function'){
done();
}
}
if (typeof define === 'function' && define.amd) {
define(function() { return minigrid; });
} else if (typeof module !== 'undefined' && module.exports) {
module.exports = minigrid;
} else {
exports.minigrid = minigrid;
}
})(this);
</script>
<script>
(function() {
minigrid('.grid', '.grid-item', 6, null,
function() {
var d = document.querySelector('.grid');
d.style.opacity = 1;
}
);
window.addEventListener('resize', function() {
minigrid('.grid', '.grid-item');
});
})();
</script>
</body>
</html>版权所属: Amals技术博客
原文地址: http://www.amals.org/?id=73
1119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
