【vue-waterfall2组件】

瀑布流插件

npm i vue-waterfall2@latest --save

main.js

import waterfall from 'vue-waterfall2'
Vue.use(waterfall)
NameDefaultTypeDesc
height100%String容器高度
col2Number列数
width-Number宽度
gutterWidth10Number间隔的宽度
data[]Array数据
isTransitiontrueBoolean加载图片是否使用过渡动画
lazyDistance300Number触发图片懒加载的距离
loadDistance300Number触发上拉加载更多的距离

提供懒加载

<waterfall :col='col'   :data="data"     >
  <template>
     <img v-if="item.img" :lazy-src="item.img" alt="加载错误"  />
  </template>
</waterfall>

waterfall.vue

 
<template>
  <div class="container-water-fall">
    <div><button  @click="loadmore">loadmore</button> <button @click="mix">mix</button> <button @click="switchCol('5')">5列</button> <button @click="switchCol('8')">8列</button> <button @click="switchCol('10')">10列</button> </div>

    <waterfall :col='col' :width="itemWidth" :gutterWidth="gutterWidth"  :data="data"  @loadmore="loadmore"  @scroll="scroll"  >
      <template >
        <div class="cell-item" v-for="(item,index) in data">
          <img v-if="item.img" :src="item.img" alt="加载错误"  /> 
          <div class="item-body">
              <div class="item-desc">{{item.title}}</div>
              <div class="item-footer">
                  <div class="avatar" :style="{backgroundImage : `url(${item.avatar})` }"></div>
                  <div class="name">{{item.user}}</div>
                  <div class="like" :class="item.liked?'active':''" >
                      <i ></i>
                      <div class="like-total">{{item.liked}}</div>  
                  </div>
              </div>
          </div>
        </div>
      </template>
    </waterfall>
    
  </div>
</template>
export default{
        data(){
            return{
                data:[],
                col:5,
            }
        },
        computed:{
          itemWidth(){  
                return (138*0.5*(document.documentElement.clientWidth/375))  #rem布局 计算宽度
          },
          gutterWidth(){
                return (9*0.5*(document.documentElement.clientWidth/375))    #rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
          }
        },
        methods:{
            scroll(scrollData){
                console.log(scrollData)
            },
            switchCol(col){
                this.col = col
                console.log(this.col)
          },
          loadmore(index){
                this.data = this.data.concat(this.data)
          }
        }
    }

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 将Linux系统克隆到新机器可以通过以下步骤完成: 1. 使用克隆软件,如Clonezilla,将原机器的硬盘镜像备份到外部存储设备中。 2. 将备份的镜像文件拷贝到新机器的硬盘中。 3. 使用克隆软件,如Clonezilla,将镜像文件还原到新机器的硬盘中。 4. 修改新机器的网络配置、主机名等信息,确保与原机器不冲突。 5. 重启新机器,检查系统是否正常运行。 需要注意的是,克隆过程中可能会出现硬件兼容性问题,需要根据具体情况进行调整。同时,如果原机器上有敏感数据,需要确保在备份和还原过程中数据不会泄露。 ### 回答2: 在将Linux系统克隆到新机器上之前,需要注意以下几个因素: 1.硬件设备不同。新机器的硬件设备可能与原机器不同。如果原机器是一台定制的PC,那么它的硬件设备可能会更为特殊。在这种情况下,将Linux系统克隆到新机器可能会遇到一些问题。 2.文件系统不同。新机器的文件系统可能与原机器不同。不同的文件系统可能会有不同的特性和配置。如果你要将Linux系统从一个使用EXT4文件系统的机器克隆到另一个使用XFS文件系统的机器上,那么你可能需要进行额外的配置和调整。 3.IP地址不同。新机器的IP地址可能与原机器不同。如果你要克隆一个原本运行在本地网络上的Linux系统并将其放到另一个网络中,那么你可能需要更改该系统的IP地址以确保它能够正常连接到新的网络中。 在考虑了以上因素后,以下是一些步骤,可以帮助你将Linux系统克隆到新机器上: 1.备份原系统。首先,你需要备份原系统。你可以使用备份软件,如rsync或tar,对整个系统进行备份。如果你不想备份整个系统,你也可以选择备份系统分区中的重要文件。 2.创造一个克隆副本。一旦你备份了原系统,你需要创造一个克隆副本来安装到新机器上。你可以选择在新机器上用dd命令从备份中创建一个完整的系统副本,也可以安装一个新的系统并使用备份副本中的数据来配置系统。 3.调整新系统。一旦你通过一个方法将克隆副本安装到新机器上,你需要开始调整新系统。你需要基于新机器的硬件设置和文件系统配置调整新系统的设置。你需要检查新系统中的各种配置文件和脚本,以确保它们包含了新机器的正确参数,比如新的MAC地址和IP地址等。 通过上述步骤,你就可以将你的Linux系统克隆到新机器上。总体来说,尽管Linux系统移植可能会相对较容易,但是还是需要认真检查和测试,以确保新系统在新环境中能够完全正常运行。 ### 回答3: Linux系统克隆到新机器是为了在新机器上快速地部署一个与原机器相同的环境,以便于维护和管理。在克隆过程中,需要注意的一些细节,以保证克隆后的系统可以正常运行。 首先,要保证新机器与原机器硬件环境相同或相似,例如,CPU型号、内存容量、硬盘大小等。如果硬件不同,可能会导致克隆后的系统出现兼容性问题。另外,在克隆前,需要备份好原机器的数据,以免数据丢失。 其次,选择合适的克隆方式。常用的克隆方式有以下几种: 1.使用dd命令将原机器系统盘的内容按照扇区逐一复制到新机器的系统盘上。这种方式的优点是直接复制硬盘数据,克隆后的系统与原系统完全一致。缺点是克隆过程耗时较长,成功率较低,同时需要注意分区、文件系统等设置。 2.使用rsync命令实现增量备份。该方式的优点是可以实现增量备份,只备份差异部分,以节省时间和网络资源。缺点是需要具备较高的技术水平,同时需要注意文件权限、软链接等问题。 3.使用专业的克隆软件,如Clonezilla、Acronis等。这些软件可以提供更加完整和可靠的克隆方案,同时支持不同操作系统和文件系统。缺点是需要购买或注册软件,且设置较为复杂。 无论采用何种方式,克隆系统后需要重新配置网络、修改主机名、更新软件包等操作,以确保系统可以正常运行。当然,个别情况下也可能会需求手动调整一些设置,对于不熟悉Linux系统的用户来说可能会面临一定的难度。因此,建议根据具体情况选择适合自己的克隆方式,并在克隆前做好备份和预防措施。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值