丰镇市网站,wordpress 标点排版,建设工程施工合同范本2017下载,网页设计基础图片前言 完成一个动漫人物的瀑布流布局#xff0c;分别通过原生JavaScript、Css3和Jquery方式实现。 首先是使用JavaScript。 一、创建基本框架 1 HTML结构 main //便于以后进行 相对定位div classwrap //为了方便设置图片和图… 前言 完成一个动漫人物的瀑布流布局分别通过原生JavaScript、Css3和Jquery方式实现。 首先是使用JavaScript。 一、创建基本框架 1 HTML结构 main //便于以后进行 相对定位div classwrap //为了方便设置图片和图片之间样式绝对定位div classpic //包裹图片设置单个图片的样式img srcimg/1.jpg alt图片1/div/div
/main 2 CSS基本样式 *{ /* 简单全局重置 */margin: 0;padding: 0;
}main{position: relative; /*相对布局*/
}.wrap{padding: 15px 0 0 15px; /*设置内边距便于以后JS计算高度*/
}.pic{border: 1px solid #ccc;padding: 10px;border-radius: 5px; /*设置边框圆角 */box-shadow: 0 0 6px #ccc; /*水平、垂直偏移模糊度颜色*/
}.pic img{width: 162px; /*瀑布流特点图片等宽不等高 */height: auto;
} 二、设置图片的定位 和 排序 1 设置列数和main的宽度 window.onloadfunction(){waterfall(main,.wrap);
}function waterfall(parent,box){var oneparent document.querySelector(parent); //获取main元素//S1 获取main元素里面的所有 类warp元素var boxs oneparent.querySelectorAll(box); //S2 计算整个页面显示的列数页面宽/每列的盒子wrap宽var oneboxwidth boxs[0].offsetWidth; //每列的盒子wrap宽var cols Math.floor(document.documentElement.clientWidth / oneboxwidth) ; //获取 整数列数//S3 设置main的 固定宽度oneparent.style.cssText width: (oneboxwidth * cols)px; margin:0 auto;
} 2 获取第一列图片的高度 window.onloadfunction(){waterfall(main,.wrap);
}function waterfall(parent,box){var oneparent document.querySelector(parent); //获取main元素// 获取main元素里面的所有 类warp元素var boxs oneparent.querySelectorAll(box); ............//获取第一列图片的高度//S1 存放数据的 数组var boxsHeightArry [];//S2 获取图片高度并存放for (var i0; iboxs.length; i){if(i cols){boxsHeightArry.push(boxs[i].offsetHeight);}}console.log(boxsHeightArry);
} 3 绝对定位把以后的图片都放到第一行最矮的下方 //S1 存放数据的 数组var boxsHeightArry [];//S2 获取图片高度并存放for (var i0; iboxs.length; i){if(i cols){boxsHeightArry.push(boxs[i].offsetHeight);}else{//S1 获取第一行的最小值索引值minBoxHeight Math.min.apply(null,boxsHeightArry);minBoxHeightIndex boxsHeightArry.indexOf(minBoxHeight);//S2 调试 console.log( minBoxHeightIndex);//S3 设置第二行及以后行 图片的绝对定位位置boxs[i].style.position absolute;boxs[i].style.top minBoxHeight px;boxs[i].style.left oneboxwidth * minBoxHeightIndex px;}} 4 每次循环时都增加后放的图片的高度从而改变数组里最矮的值 else{ //S1 获取第一行的最小值索引值minBoxHeight Math.min.apply(null,boxsHeightArry);minBoxHeightIndex boxsHeightArry.indexOf(minBoxHeight);//S2 调试 console.log( minBoxHeightIndex);//S3 设置第二行及以后行图片的 绝对定位位置boxs[i].style.position absolute;boxs[i].style.top minBoxHeight px;// boxs[i].style.left oneboxwidth * minBoxHeightIndex px;boxs[i].style.left boxs[minBoxHeightIndex].offsetLeft px;//从第二行开始每次循环时都增加后放的图片的高度从而改变数组里最矮的值boxsHeightArry[minBoxHeightIndex] boxs[i].offsetHeight;
} 四 Reference 1 js改变css样式的三种方法; 转载于:https://www.cnblogs.com/ygming/p/8446850.html
