<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="装修,出租房装修,出租屋装修,杭州出租房装修">
<meta name="description" content="恋家科技是国内首家专注于租赁住房装修领域的垂直装修服务平台。为超过百万房东、中介等用户提供优质施工队派单和售后质保等装修服务。恋家始终以利他和共赢的精神面对合作伙伴， 致力于汇聚施工队资源，在数据积累的基础之上，运用智能管理系统完成透明精准报价、优质施工队匹配、线上工程监控等装修服务，切实解决用户烦恼，完美提升用户体验，实现房东、中介与施工队的利益双赢。">
<title>装修图库</title>
<link rel="stylesheet" href="../../css/reset.css">
<link rel="stylesheet" href="../../css/header/leftPop.css">
<link rel="stylesheet" href="../../css/foot/foot.css">
<link rel="stylesheet" href="../../css/decorationNews/decorationGallery.css">
<link rel="shortcut icon" href="../../img/websitePage/slogo.ico" type="image/x-icon" />
</head>
<body>
<div class="headerBox">
</div>
<div class="decorationGalleryBox">
<h1 class="decorationGalleryTitle">装修图库</h1>
<div class="decorationGalleryList">
<div id="container" class="clearfix">
<!--<div class="box">-->
<!--<div class="boximg">-->
<!--<img src="../../img/decorationNews/industryInfo.png">-->
<!--<div>图一</div>-->
<!--</div>-->
<!--</div>-->
</div>
</div>
<div class="lookMoreBox">
<div class="lookMore">加载更多</div>
</div>
</div>
<div class="foot">
</div>
<div></div>
</body>
<script src="../../js/jquery-3.2.1.min.js"></script>
<script src="../../js/config.js"></script>
<script>
$(document).ready(function(){
$(".headerBox").load("../header/leftPop.html",function(){
$.getScript("../../js/header/leftPop.js");
});
$(".foot").load("../foot/foot.html");
$(".conIn").eq(0).css("display","block");
});
var imgJson=[];
var clickNum=1;
sendReqImg(clickNum);
$(".lookMore").click(function(){
clickNum=clickNum+1;
sendReqImg();
});
function sendReqImg() {
var obj={"pageNum":1,"pageSize":10};
obj.pageNum=clickNum*1;
getData(webRoot+"/decoration/queryDecorationGalleryList",obj,true,function(json){
console.log(json)
if(json.resultFlag){
if(json.data.list.length){
imgJson=imgJson.concat(json.data.list);
loadImg();
}else{
clickNum--;
}
}else{
clickNum--;
}
});
}
function loadImg() {
var oContainer=document.getElementById('container');
var count = 0;
oContainer.innerHTML='';
for(var i=0;i<imgJson.length;i++){
var oBox=document.createElement('div');
oBox.className='box';
oContainer.appendChild(oBox);
var oBoximg=document.createElement('div');
oBoximg.className='boximg';
oBox.appendChild(oBoximg);
var img=document.createElement('img');
img.src=imgJson[i].picture;
img.className='showImg';
oBoximg.appendChild(img);
var titleDiv=document.createElement('div');
titleDiv.className='titleDiv';
titleDiv.innerHTML=imgJson[i].pictureTitle;
oBoximg.appendChild(titleDiv);
(function (index) {
img.onload = function() {
//console.log(index,count);
if(++count === imgJson.length) {
imgLocation();
}
}
})(i)
}
// var imgdefereds=[]; //定义一个操作数组
// $('#container .showImg').each(function(){ //遍历所有图片，将图片
// var dfd=$.Deferred(); //定义一个将要完成某个操作的对象
// $(this).bind('load',function(){
// dfd.resolve(); //图片加载完成后，表示操作成功
// });
// if(this.complete){ //如果图片加载状态为完成，那么也标识操作成功
// setTimeout(function(){
// dfd.resolve();
// },1000);
// }
// imgdefereds.push(dfd); //将所有操作对象放入数组中
// })
// $.when.apply(null,imgdefereds).done(function(){ //注册所有操作完成后的执行方法
// imgLocation();
// });
}
function imgLocation(){
var oContainer=document.getElementById('container');
var aBox=oContainer.children;
var cWidth=document.documentElement.clientWidth||document.body.clientWidth
var imgW=cWidth*0.31+"px";
oContainer.style.margin='0 auto';
var arrHeight=[];
for(var i=0;i<aBox.length;i++){
if(i<3){
aBox[i].children[0].style.height=parseInt(imgW*imgJson[i].imgHeight/imgJson[i].imgWidth)+"px";
arrHeight.push(aBox[i].offsetHeight)
//console.log(arrHeight,i,"ss");
}else{
var minHeight=Math.min.apply(null,arrHeight);
var minIndex=getminIndex(arrHeight,minHeight);
aBox[i].children[0].style.height=parseInt(imgW*imgJson[i].imgHeight/imgJson[i].imgWidth)+"px";
aBox[i].style.position='absolute';
aBox[i].style.top=minHeight+'px';
aBox[i].style.left=aBox[minIndex].offsetLeft+'px';
arrHeight[minIndex]=arrHeight[minIndex]+aBox[i].offsetHeight;
}
console.log(arrHeight,i);
if(i==aBox.length-1){
//console.log(aBox[i].offsetHeight)
var maxHeight=Math.max.apply(null,arrHeight);
oContainer.style.height=maxHeight+100+'px';
}
}
}
function getminIndex(arr,min){
for(var i=0;i<arr.length;i++){
if(arr[i]==min){
return i;
}
}
}
window.addEventListener( 'resize', loadImg , false );
</script>
</html>css
.decorationGalleryBox{
width: 75%;
padding: 100px 12.5%;
}
.decorationGalleryBox .decorationGalleryTitle{
font-size: 26px;
line-height: 52px;
color: #666666;
font-weight: bold;
}
.decorationGalleryList{
width: 100%;
height: auto;
margin-top: 100px;
}
#container{
position: relative;
height: auto;
}
#container .box{
float: left;
width: 31%;
padding:0 1%;
padding-bottom: 2%;
}
#container .box .boximg{
width: 100%;
height: auto;
overflow: hidden;
border-radius: 4px;
padding: 5px;
box-shadow: 0 0 5px #b6b6b6;
}
#container .box .boximg img{
width: 100%;
height: 100%;
}
#container .box .boximg .titleDiv{
height: 32px;
line-height: 32px;
font-size: 16px;
text-align: center;
color: #666666;
}
.lookMoreBox{
width: 100%;
height: 60px;
position: relative;
}
.lookMoreBox .lookMore{
width: 100px;
height: 50px;
line-height: 50px;
border-radius: 10px;
background: #2fa5ff;
color: #ffffff;
position: absolute;
left: 50%;
top:0;
margin-left: -50px;
text-align: center;
font-size: 20px;
}
572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
