一直以来,习惯了jquery的DOM操作方式,突然间,开始学习使用vuejs,很多时候,操作DOM观念总是转换不过来,虽然也能实现各种效果,但是总有点不伦不类的。

就类似于最近在做的瀑布流布局,正常的方式完成,并且上线之后,作为练手,也使用vuejs来走了一趟。

需求:瀑布流布局照片墙

使用了SUI-Mobile结合vuejs。

实现过程: 

<div class="waterfalls">
<ul id="waterfalls-left">
</ul>
<ul id="waterfalls-right">
</ul>
<ul id="items">
</ul>
</div>

 前两个ul作为实际布局需要存在的,就是瀑布流的左边和右边两部分,而第三个id为items的ul,实际上是作为中转出现的。 

   <ul id="items">
<li v-for="photo in photos">
<router-link :to="'detail/'+photo.id">
<img :src="photo.src" alt="">
<span v-show="photo.isDel" @click.stop.prevent="noLink">{{photo.delDesc}}</span>
</router-link>
<div class="desc-info">
<p>编号:<span>{{photo.numbering}}</span></p>
</div>
<div class="card-footer no-border">
<a href="#" :class="['link custom-link']" @click.prevent.stop="praise">{{photo.praise || 0}}</a>
<span></span>
<a href="#" class="link custom-link">编辑</a>
<span></span>
<a href="#" class="link custom-link">删除</a>
</div>
</li>
</ul>

  在ul#items里面循环产生所有需要加载的li,原因在于:完全依据数据,是没办法哪条数据最终生成的li的高度是多少,从而无法判断这条数据是应该添加在左边还是右边的。

  下面就是将ul#items里面生成的li逐个的搬到ul#waterfalls-left或者ul#waterfalls-right里面。  

$("#items").children("li").each(function (index, val) {
// 相关搬迁的代码
});

如果直接这么写的话,会发现没有数据,但是当你打印数据的时候,又确实是存在相关数据,通过开发者工具也完全能够查到相关DOM结构的,关键问题在于选取$("#items")时,vuejs还没有完全生成相关结构,所以最简单的解决方案是加延时setTimeout();

setTimeout(function () {
$("#items").children("li").each(function (index, val) {
// 相关搬迁的代码
})
}, 0);

  并不需要具体的延时时间。

  相关搬迁代码,有一个关键点是,如果ul#waterfalls-left的height小于等于ul#waterfalls-right的height的话,就往ul#waterfalls-left追加,否则追加到ul#waterfalls-right。计算其实际高度的时候,li高度必须完全被撑起来,而li的实际高度是有img的高度决定的。那么很自然的会想到,高度计算必须是在img.onload之后计算的。

            var $this = $(this);
var $img = $this.find("img").first(); $img.on("load", function () {
addItems();
}); function addItems() {
if(_this.leftHeight <= _this.rightHeight){
$l.append($this);
_this.leftHeight = $l.height();
}else{
$r.append($this);
_this.rightHeight = $r.height();
}
}

  到这里,基本上已经实现了所需要的瀑布流效果,但是经过测试之后,发现存在另一个问题,就是当第一次加载完成之后,直接刷新页面的话,数据会完全丢失。是因为数据已经存在,所以走不到img.onload里面去了(不知道为什么),解决方案是判断img.complete。同时,保险起见,添加如果图片加载失败的替代图片。

修改之后的代码为:

       var _this = this,
$l = $("#waterfalls-left"),
$r = $("#waterfalls-right"); setTimeout(function () {
$("#items").children("li").each(function (index, val) {
var $this = $(this);
var $img = $this.find("img").first();
$img.on("error", function () {
$img.attr("src", "../src/assets/images/default.png");
}); if ($img.get(0).complete) {
addItems();
} else {
$img.on("load", function () {
addItems();
});
} function addItems() {
if(_this.leftHeight <= _this.rightHeight){
$l.append($this);
_this.leftHeight = $l.height();
}else{
$r.append($this);
_this.rightHeight = $r.height();
}
}
});
}, 0);

  

vuejs实现瀑布流布局(一)的更多相关文章

  1. vuejs实现瀑布流布局(三)

    前面写过vuejs实现的瀑布流布局,<vuejs实现瀑布流布局(一)>和<vuejs实现瀑布流布局(二)>也确实实现了瀑布流布局,但是这个是基于SUI-Mobile实现的无限滚 ...

  2. vuejs实现瀑布流布局(二)

    瀑布流布局已然完成,那么剩下的就是另一个比较大的工程了——无限加载. 之前说了,这个活动项目是基于SUI-Mobile搭建的,所以可以直接使用sui内建组件“无限加载”来实现这个功能. 没有真实的数据 ...

  3. JS瀑布流布局

    好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...

  4. CSS3学习总结——实现瀑布流布局与无限加载图片相册

    首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...

  5. myWaterfall - jQuery瀑布流布局插件

    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

  6. jquery实现简单瀑布流布局(续):图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  7. jquery实现简单瀑布流布局

    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...

  8. JavaScript——基本的瀑布流布局及ajax动态新增数据

    本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...

  9. flexbox实现不等宽不等高的瀑布流布局

    第一次做不等宽不等高的瀑布流布局,刚开始企图用ccs3的column属性+flexbox来实现,瞎捣鼓半天都没有能弄好, 弱鸡哭晕在厕所(┬_┬),气的午饭都没有吃. 后来逼着自己冷静下来,又捣鼓了1 ...

随机推荐

  1. 修改 spawn node.exe" ENOENT at notFoundError问题

    Ionic server启动后,出现spawn node.exe" ENOENT at notFoundError ...\node_modules\cross-spawn\lib\enoe ...

  2. tornado 笔记

    简单比较Django和Tornado Django是走大而全的方向,注重的是高效开发,最出名的是全自动化管理后台 Tornado走的是少而精的方向,注重的是性能的优化,最出名的是异步非堵塞 安装方式: ...

  3. Hadoop数据分析实例:P2P借款人信用风险实时监控模型设计

    Hadoop数据分析实例:P2P借款人信用风险实时监控模型设计 一提到hadoop相信熟悉IT领域或者经常关注互联网新闻的朋友都应该很熟悉了,当然,这种熟悉可能也只是听着名字耳熟,但并不知道它具体是什 ...

  4. typedef定义数组类型

    typedef语句定义数组类型 1. 一维数组类型的定义格式 typedef <元素类型关键字><数组类型名>[<常量表达式>]; 例如: (1) typedef ...

  5. ByteType字符串中判断是否英文

    ByteType('123你好吗',1)=mbSingleByte//单字节ByteType('123你好吗',4)=mbLeadByte//双字节字符的第一个字符ByteType('123你好吗', ...

  6. git初始化项目 以及 git常用操作

    初始化项目 $ git config --global user.name "Your Name"  配置用户名 $ git config --global user.email ...

  7. Mysql 性能优化4 mysql参数配置

    mysql 参数的介绍 大概450项参数,大多保持默认就可以了 错误的参数 崩溃,错误,运行缓慢. 参数最好在生产环境前配置好.最好不要在生产环境 中 直接配置,有可能不会立即生效,或者之前的数据和配 ...

  8. Java事件监听器的四种实现方式

    自身类作为事件监听器 外部类作为事件监听器 匿名内部类作为事件监听器 内部类作为事件监听器 自身类作为事件监听器: import javax.swing.*; import java.awt.*; i ...

  9. CSS 鼠标选中文字后改变背景色的实现代码

    废话不多说,直接上代码 ::-moz-selection{background:#93C; color:#FCF;} ::selection {background:#93C; color:#FCF; ...

  10. Survival Analysis

    code{white-space: pre;} Survival Analysis Zhu Lin 2017-3-18 What is Survival Analysis Survival analy ...