五星好评效果&放大镜效果&瀑布流
- 五星好评效果
- 思想
- HTML
- js
- 效果
- 放大镜效果
- 思想
- HTML
- js
- 效果
- 瀑布流
- 固定列数瀑布流
- 思想
- HTML
- js
- 效果
- 自适应瀑布流
- 思想
- HTML
- js
- 效果
五星好评效果
思想
/*
属性：
获取所有的li
获取放置评价信息的div
记录点击下标
记录点击状态 = false
评价内容：差，一般，好，很好，非常好
移入事件
if(是否点击过){
if(当前移入的下标 >= 点击下标){
for(let c = 0;c < 长度;c ++){
星星.style.background = 灰色
}
for(let i = 0;i <= 当前下标;i ++){
li.style.background = ‘金色’;
}
}
}else{
for(let c = 0;c < 长度;c ++){
星星.style.background = 灰色
}
for(let i = 0;i <= 当前下标;i ++){
li.style.background = ‘金色’;
}
}
点击事件
记录点击下标 = 当前点击的下标
记录点击状态 = true
放置评价信息的div.innerText = 评价内容[当前点击的下标]
*/HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五星好评</title>
<style type="text/css">
#ul1{
width: 200px;
height: 28px;
padding: 0;
margin: 0;
list-style: none;
}
#ul1 li{
width: 27px;
height: 28px;
float: left;
background: url(img/star.gif) no-repeat 0 0;
}
</style>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="box"></div>
<script src="js/index.js"></script>
</body>
</html>js
/*
属性：
获取所有的li
获取放置评价信息的div
记录点击下标
记录点击状态 = false
评价内容：差，一般，好，很好，非常好
移入事件
if(是否点击过){
if(当前移入的下标 >= 点击下标){
for(let c = 0;c < 长度;c ++){
星星.style.background = 灰色
}
for(let i = 0;i <= 当前下标;i ++){
li.style.background = '金色';
}
}
}else{
for(let c = 0;c < 长度;c ++){
星星.style.background = 灰色
}
for(let i = 0;i <= 当前下标;i ++){
li.style.background = '金色';
}
}
点击事件
记录点击下标 = 当前点击的下标
记录点击状态 = true
放置评价信息的div.innerText = 评价内容[当前点击的下标]
*/
class Star{
constructor(){
// 属性：
// 获取所有的li
this.li = document.querySelectorAll('#ul1 li');
// 获取放置评价信息的div
this.div = $('#box');
//获取ul
// this.ul = $('#ul1');
// 记录点击下标
this.index = -1;
// 记录点击状态 = false
this.flag = false;
// 评价内容：差，一般，好，很好，非常好
this.arr = ['差','一般','好','很好','非常好'];
//方法
this.addEvent();
}
addEvent(){
// 移入事件
//遍历每一个星星
for(let i = 0,len = this.li.length;i < len;i ++){
this.li[i].onmouseenter = function(){
if(this.flag){
if(i >= this.index){
for(let a = 0,len = this.li.length;a < len;a ++){
this.li[a].style.background = ' url(img/star.gif) no-repeat 0 0';
}
//滑入的星星之前的所有星星都变亮
for(let b = 0;b <= this.index; b ++){
this.li[b].style.background = ' url(img/star.gif) no-repeat 0 -29px';
}
}
}else{//没有点击过，滑入那个星星，哪个星星之前的所有星星就都变亮，当再次滑入前面的星星的时候，后面所有的星星都变暗，所以，当每次滑入的时候就先让所有的星星都变暗，滑入哪个再让哪个之前的星星都变亮。
//所有星星都变暗
for(let c = 0,len = this.li.length;c < len;c ++){
this.li[c].style.background = ' url(img/star.gif) no-repeat 0 0';
}
//滑入的星星之前的所有星星都变亮
for(let j = 0;j <= i; j ++){
this.li[j].style.background = ' url(img/star.gif) no-repeat 0 -29px';
}
}
}.bind(this);
// 点击事件
this.li[i].onclick = function(){
// 记录点击下标 = 当前点击的下标
this.index = i;
// 记录点击状态 = true
this.flag = true;
// 放置评价信息的div.innerText = 评价内容[当前点击的下标]
this.div.innerText = this.arr[i];
//点击的星星之前的都变亮
for(let m = 0,len = this.li.length;m < len;m ++){
this.li[m].style.background = ' url(img/star.gif) no-repeat 0 0';
}
//滑入的星星之前的所有星星都变亮
for(let m = 0;m <= i; m ++){
this.li[m].style.background = ' url(img/star.gif) no-repeat 0 -29px';
}
}.bind(this);
}
}
}
function $(selector){
return document.querySelector(selector);
}
new Star();效果
鼠标放上去的效果
鼠标点击的效果
放大镜效果
思想
面向对象的思维分析
分析功能
移入事件，移入的时候，滑块显示，大图显示
移出事件，移出的时候，滑块消失，大图消失
移动事件，移动的时候，滑块跟随，滑块有边界，不能出来图片，且鼠标在滑块中间
放大镜的核心：求比例
鼠标在小图上移动多少，对应的右边的大图移动相应对的比例。
要注意：图片上面加了一层透明度为0的遮罩层，因为鼠标是在图片上移动，鼠标和图片之间还有一个滑块，所以要在图片上加一层透明度为0的遮罩层，让鼠标直接在遮罩层上移动。
/*
属性
1. 获取小图（坑)==> 遮罩
2. 获取滑块
3. 获取大图盒子
4. 获取大图
方法
事件
1. 移入
滑块显示
大图显示
2. 移出
滑块消失
大图消失
3. 移动
滑块跟随–鼠标在滑块中间–边界
//放大镜的核心：求比例
let p_x = 滑块当前的left / (图片的宽度 - 滑块的宽）
let p_y = 滑块当前的top / (图片的高度 - 滑块的高）
//设置大图的位置
大图.style.left = -p_x * (大图的宽度 - 大图所在盒子的宽) + ‘px’;
大图.style.top = -p_y * (大图的高度 - 大图所在盒子的高) + ‘px’;
*/HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="div1">
<div class="small_pic">
<span class="mark"></span> <!--遮罩层-->
<span class="float_layer"></span>
<img src="img/small.jpg" />
</div>
<div class="big_pic">
<img src="img/big.jpg" />
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>js
/*
属性
1. 获取小图（坑)==> 遮罩
2. 获取滑块
3. 获取大图盒子
4. 获取大图
方法
事件
1. 移入
滑块显示
大图显示
2. 移出
滑块消失
大图消失
3. 移动
滑块跟随--鼠标在滑块中间--边界
//放大镜的核心：求比例
let p_x = 滑块当前的left / (图片的宽度 - 滑块的宽）
let p_y = 滑块当前的top / (图片的高度 - 滑块的高）
//设置大图的位置
大图.style.left = -p_x * (大图的宽度 - 大图所在盒子的宽) + 'px';
大图.style.top = -p_y * (大图的高度 - 大图所在盒子的高) + 'px';
*/
class Glass{
constructor(){
// 1. 获取遮罩
this.mark = $('.mark');
// 2. 获取滑块
this.float = $('.float_layer');
// 3. 获取大图盒子
this.big_pic = $('.big_pic');
// 4. 获取大图
this.big_img = $('.big_pic img');
//添加事件
this.addEvent();
}
addEvent(){
// 1. 移入
// 滑块显示
// 大图显示
this.mark.onmouseenter = function(){
this.float.style.display = 'block';
this.big_pic.style.display = 'block';
}.bind(this);
// 2. 移出
// 滑块消失
// 大图消失
this.mark.onmouseleave = function(){
this.float.style.display = 'none';
this.big_pic.style.display = 'none';
}.bind(this);
// 3. 移动
// 滑块跟随--鼠标在滑块中间--边界
// //放大镜的核心：求比例
// let p_x = 滑块当前的left / (图片的宽度 - 滑块的宽）
// let p_y = 滑块当前的top / (图片的高度 - 滑块的高）
// //设置大图的位置
// 大图.style.left = -p_x * (大图的宽度 - 大图所在盒子的宽) + 'px';
// 大图.style.top = -p_y * (大图的高度 - 大图所在盒子的高) + 'px';
this.mark.onmousemove = function(evt){
let e = evt || window.event;
let left = e.offsetX - this.float.offsetWidth / 2;
let top = e.offsetY - this.float.offsetHeight / 2;
//边界
if(left <= 0){
left = 0;
}else if(left >= this.mark.offsetWidth - this.float.offsetWidth){
left = this.mark.offsetWidth - this.float.offsetWidth;
}
if(top <= 0){
top = 0;
}else if(top >= this.mark.offsetHeight - this.float.offsetHeight){
top = this.mark.offsetHeight - this.float.offsetHeight;
}
this.float.style.left = left + 'px';
this.float.style.top = top + 'px';
// let p_x = 滑块当前的left / (图片的宽度 - 滑块的宽）
// let p_y = 滑块当前的top / (图片的高度 - 滑块的高）
let p_x = left / (this.mark.offsetWidth - this.float.offsetWidth);
let p_y = top / (this.mark.offsetHeight - this.float.offsetHeight);
// //设置大图的位置
// 大图.style.left = -p_x * (大图的宽度 - 大图所在盒子的宽) + 'px';
// 大图.style.top = -p_y * (大图的高度 - 大图所在盒子的高) + 'px';
this.big_img.style.left = -p_x * (this.big_img.offsetWidth - this.big_pic.offsetWidth) + 'px';
this.big_img.style.top = -p_y * (this.big_img.offsetHeight - this.big_pic.offsetHeight) + 'px';
}.bind(this);
}
}
function $(selector){
return document.querySelector(selector);
}
new Glass();效果
瀑布流
固定列数瀑布流
思想
瀑布流的核心：找最小高度的列的位置
面向对象分析
1.求最小高度：求所有列当中最小高度列所在的下标值
固定列数，每一列为一个ul，把所有的ul放在数组中，先取出数组中第一个值（ul的高度）赋为最小值，遍历数组，拿这个最小的值与数组中后面的所有的值比较，比较出最小的，然后记录这个下标，并把这个下标返回去。
2.依次加载图片：遍历所有的图片，遍历出来是图片名，有一张图片就要有一个li标签，然后有一个img标签，然后再设置img的src属性为遍历出来的图片名。
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>瀑布</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#box {
margin: 0 auto;
width: 700px;
}
ul {
width: 200px;
float: left;
margin: 0 auto;
margin-right: 10px;
}
img {
width: 200px;
padding-top: 10px;
}
</style>
</head>
<body>
<!--<input type="button" name="btn" id="btn" value="加载图片" />-->
<div id="box">
<ul></ul>
<ul></ul>
<ul></ul>
</div>
<script src="index.js"></script>
</body>
</html>js
class WaterFall{
constructor(){
//获取所有的列
this.ul = document.querySelectorAll('#box ul');
//加载图片
this.loadImg();
}
//求最小高度
minHeight(){
//设置第一个为最小高度
let min_height = this.ul[0].offsetHeight;
//记录下标
let index = 0;
//遍历所有的ul
for(let i = 0,len = this.ul.length;i < len;i ++){
if(min_height > this.ul[i].offsetHeight){
min_height = this.ul[i].offsetHeight;
index = i;
}
}
return index;
}
//加载图片
loadImg(){
for(let i = 1;i < 57;i ++){
//创建li
let li = document.createElement('li');
//创建img
let img = document.createElement('img');
//设置src
img.src = `images/${i}.jpg`;
//把图片放到li里
li.appendChild(img);
//把li放到ul里
this.ul[this.minHeight()].appendChild(li);
}
}
}
new WaterFall();
//无限加载
//页面的实际高度 = 滚动条的高度 + 页面的可视区高度
//当 滚动条的高度 + 页面的可视区高度 >= 页面的实际高度的时候 再重新加载一遍所有的图片
//页面的可视区高度
//页面的可视区高度的声明必须写在滚动事件的外面，
window.onscroll = function(){
let client_height = document.body.offsetHeight;
//滚动条的高度
let scroll_top = Math.ceil(document.documentElement.scrollTop || document.body.scrollTop);
//页面的实际高度
let scroll_height = document.body.scrollHeight;
// let scroll_height = this.ul.offsetHeight;
console.log(scroll_top + client_height,scroll_height);
if(scroll_top + client_height >= scroll_height * 0.8){
new WaterFall();
}
}效果
自适应瀑布流
思想
/*
属性
方法
1. 获取大盒子
2. 获取所有子节点
3. 计算大盒子的宽
4. 计算一个子节点的宽
5. 计算列数
6. 计算列之间的间隙
7. 初始化第一行中每一列的坐标值。
1. 数组放置每一个子节点的坐标
2. 对象 {left:xxx,top:xxx}
8. 对号入座（将每一个子节点放到指定的位置）
核心：求最小高度的下标
*/
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>自适应瀑布流</title>
<style>
* {
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
img {
border: 0;
}
div.wrap {
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
background: #DDD;
}
div.wrap div {
width: 200px;
padding: 4px;
border: 1px solid #000;
float: left;
position: absolute;
}
div.wrap div h3 {
line-height: 35px;
}
div.wrap div img {
width: 200px;
}
</style>
<script src="js/index.js"></script>
</head>
<body>
<div class="wrap" id="wrap">
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/1.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/2.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/3.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/4.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/5.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/6.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/7.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/8.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/9.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/10.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/11.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/12.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/13.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/14.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/15.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/16.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/17.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/18.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/19.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/20.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/21.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/22.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/23.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/24.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/25.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/26.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/27.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/28.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/29.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/30.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/31.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/32.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/33.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/34.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/35.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/36.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/37.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/38.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/39.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/40.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/41.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/42.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/43.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/44.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/45.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/46.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/47.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/48.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/49.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/50.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/51.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/52.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/53.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/54.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/55.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/56.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/57.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流</span>
</div>
<div>
<h3>瀑布流</h3>
<a href="javascript:void(0)" title=""><img src="waterfall/58.jpg" alt="" title="" /></a>
<p>瀑布流瀑布流瀑布流瀑布流</p>
<span>瀑布流瀑布流瀑布流</span>
</div>
</div>
</body>
</html>js
/*
属性
方法
1. 获取大盒子
2. 获取所有子节点
3. 计算大盒子的宽
4. 计算一个子节点的宽
5. 计算列数
6. 计算列之间的间隙
7. 初始化第一行中每一列的坐标值。
1. 数组放置每一个子节点的坐标
2. 对象 {left:xxx,top:xxx}
8. 对号入座（将每一个子节点放到指定的位置）
核心：求最小高度的下标
*/
class WaterFull{
constructor(){
this.init();
}
init(){
// 1. 获取大盒子
this.big_box = document.querySelector('#wrap');
// 2. 获取所有子节点
this.childs = this.big_box.children;
// 3. 计算大盒子的宽
this.big_box_width = this.big_box.offsetWidth;
// 4. 计算一个子节点的宽
this.childs_width = this.childs[0].offsetWidth;
// 5. 计算列数
this.colum = parseInt(this.big_box_width / this.childs_width);
// 6. 计算列之间的间隙
// this.map = parseInt((this.big_box_width - this.childs_width * colum) / (this.colum + 1));
this.map = parseInt((this.big_box_width % this.childs_width) / (this.colum + 1));
// 7. 初始化第一行中每一列的坐标值。
// 1. 数组放置每一个子节点的坐标
// 2. 对象 {left:xxx,top:xxx}
//要声明在for循环外面
this.arr = [];
for(let i = 0;i < this.colum;i ++){
//把left和top存放在对象中
let obj = {
left : this.childs_width * i + this.map * (i + 1),
top : 10
}
this.arr.push(obj);
// console.log(this.arr);
}
// 8. 对号入座（将每一个子节点放到指定的位置）
for(let i = 0,len = this.childs.length;i < len;i ++){
//调用函数获取最小高度的列
let index = this.minHeight();
//确定图片的left值 为 数组中存放的最小高度的列的left值
// this.childs[i].style.left = this.arr[index].left + 'px';
// 确定图片的top值 为 数组中存放的最小高度的列的top值
// this.childs[i].style.top = this.arr[index].top + 'px';
//运动框架
sport(this.childs[i],{left : this.arr[index].left,top : this.arr[index].top});
sport(this.childs[i],{left : this.arr[index].left,top : this.arr[index].top});
//上面的图片放在了数组中最小高度列的位置，修改这个位置的top值，修改为原来的值加上放上去的图片的高度，再加上一个间隙的值。
this.arr[index].top += this.childs[i].offsetHeight + 10 ;
//由于所有的图片都使用了定位，脱离的文档流，所以大盒子没有高度
this.big_box.style.height = this.arr[index].top + 'px';
}
}
minHeight(){
let min_height = this.arr[0].top;
let index = 0;
// for(let i = 0;i < this.arr.length;i ++){
// if(min_height > this.childs[i].offsetHeight){
// min_height = this.childs[i].offsetHeight;
// index = i;
// }
// }
//有几列，数组中就存放几个值，数组中的值通过上面的（8.对号入座）操作来不断修改，然后不断判断哪一个为最小高度
this.arr.forEach(function(value,i){
if(min_height > value.top){
min_height = value.top;
index = i;
}
})
return index;
}
}
//在页面加载完成之后再执行（由于script标签在body的最上面引入）
window.onload = function(){
new WaterFull();
}
//onresize 窗口宽度自适应
//浏览器窗口宽度发生变化时，触发事件
window.onresize = function(){
new WaterFull();
}
//获取非行内样式
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,1)[attr];
}
//运动框架
function sport(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(() => {
let flag = true;
for(let attr in json){
let cur = attr === 'opacity' ? parseInt(parseFloat(getStyle(obj,attr)) * 100) : parseInt(getStyle(obj,attr));
let speed = (json[attr] - cur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(json[attr] !== cur){
flag = false;
}
if(attr === 'opacity'){
obj.style.opacity = (cur + speed) / 100;
obj.style.filter = 'alpha(opacity = ' + (cur + speed) + ')';
}else{
obj.style[attr] = cur + speed + 'px';
}
}
if(flag){
clearInterval(obj.timer);
if(fn instanceof Function){
fn();
}
}
},30)
}效果
瀑布流的列数随着屏幕的宽度的变化而变化
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
