jQuery实现照片墙,附步骤详解

现在一直使用vue写项目,发现之前的js都很生疏了,写个小demo练下手,看一下最终效果展示

功能点:点击添加图片随机添加一张图片,图片可以拖动,可以点击删除

技能点: 主要使用了jQuery的一些方法

下面就一步一步来实现它吧

一开始我想做一个按钮可以让用户自己上传图片,结果写了之后发现没有图片上传的服务接口,也懒得去找了,就直接使用本地的图片了,这里也把图片上传的功能写一下,如果你有图片上传的api可以直接使用

 

  
  
  
  
  
  



  

    

      

        
添加照片
        
      
    
  

 

这里我用的是本地的图片,写了一个img.js,在里面放了一些图片,图片地址都是百度找的

img.js

  var list = [
    {
      "id": 0,
      "name": "1",
      "date": "2017-5-26",
      "url": "http://img4.imgtn.bdimg.com/it/u=1433191751,1566568157&fm=26&gp=0.jpg"
    },
    ...
  ]

 

接着写一个点击事件,点击添加照片的按钮网页面上加一张图片

html的写法不变,把input标签去掉,这里不需要用户上传

script写法

先把图片文件引入,这样可以拿到图片地址数组

看一下效果:

 

现在加上图片的移动和删除看看,加了图片的移动后,图片的位置就发生改动,使用上面的排列方式就没有意义.添加图片时我就直接在最后一张图片后偏移一点.这里需要限制一下图片的top和left的最大最小值,以免超出墙壁范围

 

最终的效果:

 

css代码

li {
  list-style: none;
}
.meaasge_contanier {
  width: 800px;
  height: 600px;
  margin: 100px auto 0;
  background-color: sienna; 
  position: relative;
  background: url('../img/board.jpg');
  border: 3px solid #a25124;
  border-radius: 10px;
  box-shadow: 3px 3px 5px #a25124;
}
.meaasge_contanier .upload {
  width: 120px;
  height: 40px;
  position: absolute;
  top: 5px;
  left: 5px;
  text-align: center;
}
.meaasge_contanier .upload .plus {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 40px;
  position: absolute;
  background-color: #eee;
  cursor: pointer;
  border-radius: 5px;
}
.meaasge_contanier .upload input {
  width: 150px;
  overflow: hidden;
}
.meaasge_contanier .picture_list .item {
  width: 100px;
  position: absolute;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}
.meaasge_contanier .picture_list .item img {
  width: 100%;
}
.meaasge_contanier .picture_list .item .delete {
  position: absolute;
  width: 20px;
  height: 20px;
  line-height: 17px;
  text-align: center;
  border-radius: 50%;
  background-color: #909399;
  color: #fff;
  font-size: 12px;
  top: -5px;
  right: -5px;
  display: none;
  cursor: default;
}

 

转载于:https://www.cnblogs.com/steamed-twisted-roll/p/11107121.html