winney

It is never too old to learn.

0%
winney

发表于 更新于 分类于

JS实现瀑布流效果

1
2
3
4
5
<div class="content">
    <div class="item"><img src="./images/pubuliu/1.jpg" alt=""></div>
  	.....
    <div class="item"><img src="./images/pubuliu/30.jpg" alt=""></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
*{
   margin: 0;
   padding: 0;
 }
 .content{
   width: 100%;
   height: 2000px;
 }
 .content>div{
   float: left;
   border: 1px solid #ddd;
   padding: 10px;
 }
 .content>div>img{
   width: 130px;
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
window.onload =  function () {
    // 获取主容器的宽度
    var content = document.getElementsByClassName('content')[0];
    contentWidth = content.offsetWidth;

    // 获取单个图片的宽度
    var imgs = content.children;
    var imgsWidth = imgs[0].offsetWidth;

    // 第一行可以排列多少张图片
    var nums = Math.floor(contentWidth/imgsWidth)

    // 收集第一排的所有高度
    var arrHeight = [];

    for(var i = 0; i < imgs.length; i++) {
      if(i < nums) {
        arrHeight.push(imgs[i].offsetHeight)
      } else {
        // 创建一个元素的对象
        var obj = {
          minH: arrHeight[0],
          minI: 0
        }

        for(var j = 0; j < arrHeight.length; j++) {
          if(arrHeight[j] < obj.minH) {
            obj.minH = arrHeight[j]
            obj.minI = j
          }
        }

        imgs[i].style.position = "absolute"
        imgs[i].style.left = imgs[obj.minI].offsetLeft + "px"
        imgs[i].style.top = obj.minH + "px"
        arrHeight[obj.minI] = arrHeight[obj.minI] + imgs[i].offsetHeight
      }
    }
}

纯CSS实现瀑布流效果-方法1

1
2
3
4
5
6
7
8
// 结构
<body>
    <div class="shell">
        <div class="image"><img src="./images/pubuliu/1.jpg" alt=""></div>
        ......
        <div class="image"><img src="./images/pubuliu/30.jpg" alt=""></div>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 样式
<style>
    body{
        display: flex;
        justify-content: center;
    }
    .shell{
        max-width: 1300px;
        column-count: 5;
        column-gap: 15px;
    }
    .image{
        margin-bottom: 15px;
    }
    .image img{
        width: 100%;
    }
    @media (max-width:1200px){
        .shell{
            column-count: 4;
        }
    }
    @media (max-width:850px){
        .shell{
            column-count: 3;
        }
    }
    @media (max-width:600px){
        .shell{
            column-count: 2;
        }
    }
</style>

pinterest是使用瀑布流最具代表性的网站

纯CSS实现瀑布流效果-方法2-带编号（竖向）

1
2
3
4
5
6
7
8
// 结构
<body>
    <div class="shell">
        <div class="image"><img src="./images/pubuliu/1.jpg" alt=""></div>
        ......
        <div class="image"><img src="./images/pubuliu/30.jpg" alt=""></div>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 样式
.shell{
    column-count: 4;
    column-gap: 0;
}
.image{
    padding: 2px;
    position: relative;
    counter-increment: item-counter;
}
.image img{
    display: block;
    width: 100%;
    height: auto;
}
.image::after{
    position: absolute;
    display: block;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    background-color: #000;
    color: #fff;
    content: counter(item-counter);
}

https://codepen.io/stevenlei/pen/vYNZaZN

纯CSS实现瀑布流效果-方法3-带编号（横向-左到右，上到下）-flexbox

1
2
3
4
5
6
7
8
9
<div class="masonry">
  <div class="item">
    <img src="https://picsum.photos/360/460?random=1">
  </div>
	......
  <div class="item">
    <img src="https://picsum.photos/360/420?random=15">
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
body {
  margin: 4px;
  font-family: Helvetica;
  
  /* Centering & Limit Width */
  margin: auto;
  width: 720px;
}

.masonry {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 1000px;
}

.item {
  position: relative;
  width: 25%;
  padding: 2px;
  box-sizing: border-box;
  counter-increment: item-counter;
}

.item img {
  display: block;
  width: 100%;
  height: auto;
}

.item::after {
  position: absolute;
  display: block;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  background-color: #000;
  color: #fff;
  content: counter(item-counter);
}

.item:nth-child(4n+1) {
  order: 1;
}

.item:nth-child(4n+2) {
  order: 2;
}

.item:nth-child(4n+3) {
  order: 3;
}

.item:nth-child(4n) {
  order: 4;
}

图片资源：picsum

引用方式：https://picsum.photos/360/460?random=1

代码参考：https://codepen.io/stevenlei/pen/PoPjBBm

发表于 更新于 分类于

文件选择框(input type=”file”)的默认样式跟项目中的样式不是很搭，所以需要修改文件选择框的样式。

效果图：

文件选择框

方式一，使用::file-selector-button

HTML:

1
<input type="file" id="default-btn">

CSS:

1
2
3
4
5
6
7
8
9
#default-btn::file-selector-button{
    padding: 6px 10px;
    background-color: #1E9FFF;
    border: 1px solid #1E9FFF;
    border-radius: 3px;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
}

这种方法，文件选择框右侧默认就显示“未选择文件”的文字。如果您想隐藏这些文字，可以设置选择框input元素的font-size：0，即：

1
2
3
#default-btn{
    font-size: 0;
}

了解更多关于::file-selector-button

方式二，使用label标签

HTML：

1
2
3
4
5
<span>
    <label for="fileInput" class="input-button" title="选择您的头像图片进行上传">选择文件</label>
    <input id="fileInput" type="file" style="display: none;">
</span>
<span id="fileName"></span>

CSS： 

1
2
3
4
5
6
7
8
9
10
.input-button {
    display: inline-block;
    padding: 6px 10px;
    background-color: #1E9FFF;
    border: 1px solid #1E9FFF;
    border-radius: 3px;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
}

方式三，使用相对定位+透明

HTML：

1
2
3
4
5
<span class="inputBtn">
    <span>选择文件</span>
    <input class="inputFile" type="file" id="myImg" name="myImg" title="选择您的头像图片进行上传">
    </span>
<span id="fileName"></span>

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.inputBtn {  
    position: relative;  
    display: inline-block;  
    padding: 6px 10px;  
    border: 1px solid #1E9FFF;  
    border-radius: 3px;  
    background-color: #1E9FFF;  
    cursor: pointer;  
    font-size: 12px;  
    color: #fff;  
}  
.inputBtn:hover{  
    border: 1px solid #3aa9fb;  
    background-color: #3aa9fb;  
}  
.inputFile {  
    position: absolute;  
    left: 0;  
    top: 0;  
    width: 100%;  
    height: 100%;  
    opacity: 0;  
    filter: alpha(opacity=0);  
}

方法三无法修改鼠标移上去时的手势，即input框设置为`cursor: pointer`不生效。因为方法三将input框的透明度设置为0，实际上还是在按钮上方的。如果项目没有要求鼠标移上去时的手势，就忽略这个问题。

显示上传文件的文件名称：

针对方法二和方法三

效果图：

显示文件名称

默认的文件选择框上传完文件之后，在右侧会显示上传文件的文件名称。如果需求需要显示，则可以按以下方式实现，如果不需要可忽略。 

1
2
3
4
5
6
7
8
9
10
const myImgEL = document.getElementById('myImg');  
const fileNameEL = document.getElementById('fileName');  
myImgEL.addEventListener('change', (event) => {
    // event.target.value的值打印是C:\fakepath\head.jpg
    // var name = event.target.value.split('\\')[2];	// 这种方式也可以  
    // console.log(name);
    const fileName = event.target.value.match(/[^\\|/]*$/)[0];
    console.log(fileName)
    fileNameEL.innerHTML = fileName;
});

想鼠标移上去，显示手指手势，设置了cursor: pointer;不起作用，解决方法：将input的字体大小设置为0：font-size: 0

发表于 更新于 分类于

appendTo()

将动态生成的元素添加到指定的目标元素中作为子元素

html：

1
<div class="target-element"></div>

jQuery：

1
$('<div class="dynamic-element">...</div>').appendTo('.target-element');
1
2
3
4
5
6
7
8
9
10
11
var html = 
`
<ul>
    <li>新闻11111</li>
    <li>新闻22222</li>
    <li>新闻33333</li>
    <li>新闻44444</li>
</ul>
`;

$(html).appendTo('.target-element');

append()

将动态生成的元素添加到指定的父元素中

html：

1
<div class="parent-element"></div>

jQuery：

1
$('.parent-element').append('<div class="dynamic-element">...</div>');
1
2
3
4
5
6
7
8
9
10
11
var html = 
`
<ul>
    <li>新闻11111</li>
    <li>新闻22222</li>
    <li>新闻33333</li>
    <li>新闻44444</li>
</ul>
`;

$('.parent-element').append(html);

on()

使用事件委托机制绑定事件处理程序，可以捕获动态生成元素的事件

使用 .on() 方法绑定事件时，应该选择一个静态的父元素，并通过选择器指定目标动态生成的元素。这样可以确保事件处理程序能够捕获到动态生成元素的事件。

对动态生成的元素进行操作，应该确保在元素已经生成并添加到 DOM 树中后再执行相应的操作，以避免操作无效。

1
$(document).on('click', '动态生成的元素的选择器', function() { ... });
1
$(父元素的选择器).on('click', '动态生成的元素的选择器', function() { ... });

html：

1
<div class="news-box"></div>

jQuery：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var html = 
`
<ul>
    <li>新闻11111</li>
    <li>新闻22222</li>
    <li>新闻33333</li>
    <li>新闻44444</li>
</ul>
`;

$('.news-box').append(html);

$('.news-box').on('click', 'ul li', function(e){
    console.log('点击某条新闻')
    console.log(this);				// <li>新闻11111</li>
    console.log(e.target);			// <li>新闻11111</li>
    console.log($(this).index())	// 0
});

live() 方法在旧版本的 jQuery 中用于绑定事件处理程序，包括对动态生成的元素的事件进行绑定。然而，自 jQuery 版本 1.7 起，live() 方法已被废弃，不再推荐使用。

remove()

从 DOM 中移除动态生成的元素

1
$('.dynamic-element').remove();

empty()

清空动态生成元素的内容

1
$('.dynamic-element').empty();