以thinkphp为例
css
<style type="text/css">
.demo {
position: relative;
opacity: 0;
transition: .2s ease;
margin-bottom: 60px;margin:0 -15px;
}
.grid {
position: relative;
/* fluffy */
margin: 0 auto;
width: 100%;
/* end fluffy */
}
.grid-item {
position: absolute;
top: 0;
left: 0px;
/* fluffy */
width: 575px;
height:auto;padding-top:5px;padding-left:5px;
border:1px solid #eee;
/* end fluffy */
-webkit-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
transition: .2s ease-in-out;
}
@media (max-width: 600px) {
.grid-item {
width: 100%;
}
}
</style>
模板
<div class="demo">
<ul class="grid ">
<volist name="list" id="v" key="k1">
<li class="grid-item">
<div class="col-sm-2 col-xs-6 "style="padding:0;padding-right:10px">
<a style="display:block;position:relative;"href="{:C('MULU')}?a=cp2&id={$v.id}">
<img title="{$v.name}"class=".img-re-w"width="100%" src="{$v.pic2}" alt="{$v.name}"/></a>
</div>
<div class="col-sm-10 col-xs-12"style="padding:0;padding-right:5px">
<h4 style="font-weight:700;word-break:break-all;font-size:15px;;line-height:22px;">
<a style="color:#3cbfae;"title="{$v.name}" href="{:C('MULU')}?a=cp2&id={$v.id}">{:msubstr2($v['name'],58,'')}</a></h4>
{$v.zifenlei}
<br/><br/>
</div>
</li>
</volist>
<br/>
</ul>
</div>
js代码
<script type="text/javascript">
(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);
(function() {
minigrid('.grid', '.grid-item', 16, null,
//16表示各模块间的距离px
function() {
var d = document.querySelector('.demo');
d.style.opacity = 1;
}
);
window.addEventListener('resize', function() {
minigrid('.grid', '.grid-item');
});
})();
</script>
演示地址:http://www.microphotons.cn/?a=cp1&id=10
效果图