/*httpimg*/

@bgimg: "https://qmarket.bj.bcebos.com/PB150703.jpg";

/*颜色变量*/

@ces: @cbl; //颜色网站基础色  

@cun: transparent; //透明背景

@cwh: rgb(255, 255, 255); //白色

/*flat 推荐颜色*/

/*http://bsfans.com/fc/index.html*/

@cor: rgb(230, 126, 34); //橙色

@cor1: rgb(211, 84, 0);

@cbl: rgb(52, 152, 219); //蓝色

@cbl1: rgb(41, 128, 185);

@cgr: rgb(46, 204, 113); //绿色

@cgr1: rgb(39, 174, 96);

@cye: rgb(241, 196, 15); //黄色

@cye1: rgb(243, 156, 18);

@cre: rgb(231, 76, 60); //红色

@cre1: rgb(192, 57, 43);

@cgy: rgb(236, 240, 241); //灰色

@cgy1: rgb(189, 195, 199);

@cbla: rgb(0,0,0); //黑色

//

/*文字颜色*/

@cc: rgb(68,68,68); //文字主要颜色

@cc1: rgb(46,46,46); //文字主要颜色

@cc2: rgb(153,153,153); //文字主要颜色

@cc3: rgb(51,51,51); //文字主要颜色

@cc4: rgb(246,246,246); //黑色背景颜色

/*背景色*/

@bgc: rgb(34, 34, 34);

@bgcc: rgb(21, 33, 47);

@bgc1: rgb(241, 241, 241);

@bgc2: rgb(238,238,238);

@bgc3: rgb(70,69,83);

@bgc4: rgb(54, 62, 75);

//

@cbsw: rgb(252, 248, 227);

//

/*边框颜色*/

@bdrc: rgb(225, 225, 225); //边框颜色

/*自定义颜色占位*/

@nbgc:rgb(47,64,80);

@nbg:rgb(41,56,70);

@idc: rgba(255,255,255,.5);

/*   */

/*其他常用变量*/

/*文字*/

@ffmix: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;

//

@rem: 14px; //

@hack: ~"\9"; //

@mpb: 15px; //基础单位

//常用class配置

.bgcw{

    background-color: @cwh;

}

.bgcb{

    background-color: @cbla;

}

.bgce{

    background-color: @ces;

}

.bgc(@c){

    background-color: @c;

}

//....

.db{

    display: block;

}

.dn{

    display: none;

}

.dib{

    display: inline-block;

}

.di{

    display: inline;

}

//....

.pr{

    position: relative;

}

.ps{

    position: absolute;

}

.pf{

    position: fixed;

}

//边框控制

.bdr(@w:1px, @s:solid, @cr:@bdrc) {

    border: @w @s @cr;

}

.bdrt(@w:1px, @s:solid, @cr:@bdrc) {

    border-top: @w @s @cr;

}

.bdrr(@w:1px, @s:solid, @cr:@bdrc) {

    border-right: @w @s @cr;

}

.bdrb(@w:1px, @s:solid, @cr:@bdrc) {

    border-bottom: @w @s @cr;

}

.bdrl(@w:1px, @s:solid, @cr:@bdrc) {

    border-left: @w @s @cr;

}

//内外边距控制

.mg(@a:@mpb) {

    margin: @a;

}

.mgt(@a:@mpb) {

    margin-top: @a;

}

.mgr(@a:@mpb) {

    margin-right: @a;

}

.mgb(@a:@mpb) {

    margin-bottom: @a;

}

.mgl(@a:@mpb) {

    margin-left: @a;

}

.pd(@a:@mpb) {

    padding: @a;

}

.pdt(@a:@mpb) {

    padding-top: @a;

}

.pdr(@a:@mpb) {

    padding-right: @a;

}

.pdb(@a:@mpb) {

    padding-bottom: @a;

}

.pdl(@a:@mpb) {

    padding-left: @a;

}

//clear

.clear {

    &:after,

    &:before {

        content: "";

        display: table;

    }

    &:after {

        clear: both;

    }

}

.cp{

    cursor: pointer;

}

//居中

.amid {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    -webkit-transform: translate(-50%,-50%);

    -ms-transform: translate(-50%,-50%);

}

.flmm {

    display: flex;

    display: -webkit-flex;

    justify-content: center;

    align-items: center;

}

/**

* animation

*/

.key (@prefix, @name, @content) when (@prefix=def) {

    @keyframes @name {

        @content();

    }

}

.key (@prefix, @name, @content) when (@prefix=moz) {

    @-moz-keyframes @name {

        @content();

    }

}

.key (@prefix, @name, @content) when (@prefix=o) {

    @-o-keyframes @name {

        @content();

    }

}

.key (@prefix, @name, @content) when (@prefix=webkit) {

    @-webkit-keyframes @name {

        @content();

    }

}

.key (@prefix, @name, @content) when (@prefix=all) {

    .key(moz,@name,@content);

    .key(o,@name,@content);

    .key(webkit,@name,@content);

    .key(def,@name,@content);

}

//trandorm

.trf(@content) {

    -webkit-transform: @content;

    -moz-transform: @content;

    -ms-transform: @content;

    -o-transform: @content;

    transform: @content;

}

//animation

.ani(@n:ani, @t:1s, @t2:.5s, @fn:ease-in-out, @i:infinite, @dur:alternate) {

    animation: @n @t @t2 @fn @i @dur;

    -webkit-animation: @n @t @t2 @fn @i @dur;

    -o-animation: @n @t @t2 @fn @i @dur;

    -moz-animation: @n @t @t2 @fn @i @dur;

}

//过度

.trs(@t:.5s, @b: ease-in-out) {

    transition: all @t @b;

    -webkit-transition: all @t @b;

    -ms-transition: all @t @b;

}

//去除设置

.unbg {

    background: transparent;

}

.unbdr {

    border-radius: 0;

}

.unbd {

    border: none;

}

.unbs {

    box-shadow: none;

    -webkit-box-shadow: none;

    -ms-box-shadow: none;

}

.unst {

    padding-left: 0;

    list-style: none;

}

.list-inline {

    .unst;

    > li {

        display: inline-block;

        padding-right: 5px;

        padding-left: 5px;

    }

}

.unl {

    text-decoration: none;

}

//杂项

.round {

    border-radius: 50%;

}

.ohd {

    overflow: hidden;

}

.ohy{

    overflow-y: auto;

}

.ohx{

    overflow-x: auto;

}

//文字方向控制

.tac {

    text-align: center;

}

.tal {

    text-align: left;

}

.tar {

    text-align: right;

}

.taj {

    text-align: justify;

}

//

.textoh {

    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;

}

.blod {

    font-weight: bolder;

}

//flex center

.fc {

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

}

.mask {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

}

//iconfont 建议使用强大的iconfont

.iconfont {

    font-family: "iconfont" !important;

    font-size: 16px;

    font-style: normal;

    -webkit-font-smoothing: antialiased;

    position: relative;

    display: inline-block;

    top: 1px;

}

//loop



.col-loop(@n, @i:@cgy1) when (@i=<@n) {

    .col-xs-@{i} {

        .pdl(0);

        .pdr(0);

    }

    .col-loop(@n,(@i+1));

}



//extend

.abs {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

}

.ffull{

    position: fixed;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    line-height: 100vh;

}

.scroll {

    &::-webkit-scrollbar-track {

        width: 3px;

        background-color: @cgy;

    }

    &::-webkit-scrollbar {

        width: 3px;

        height: @mpb;

        background-color: @ces;

    }

    &::-webkit-scrollbar-thumb {

        background-color: @ces;

    }

}

vue-form 是一个在vue 中用于表单验证的插件 目前版本为4.1.1 ??Form validation for?Vue.js 2.2+

官网地址：https://github.com/fergaldoyle/vue-form

import VueForm from 'vue-form'; 

// install globally 

Vue.use(VueForm);

Vue.use(VueForm, options); 

// or use the mixin ... 

mixins: [VueForm]

... 

mixins: [new VueForm(options)] 

...

  <vue-form :state="formstate" @submit.prevent="onSubmit">



    <validate tag="label">

      <span>Name *</span>

      <input v-model="model.name" required name="name" />



      <field-messages name="name">

        <div>Success!</div>

        <div slot="required">Name is a required field</div>

      </field-messages>

    </validate>



    <validate tag="label">

      <span>Email</span>

      <input v-model="model.email" name="email" type="email" required />



      <field-messages name="email">

        <div slot="required">Email is a required field</div>

        <div slot="email">Email is not valid</div>

      </field-messages>

    </validate>



    <button type="submit">Submit</button>

  </vue-form>

data(){

    return{ 

        formstate: {},

        model: { name: '', email: 'invalid-email' } }, 

    } 

methods: { 

    onSubmit: function () { 

        if(this.formstate.$invalid) { 

        // alert user and exit early

            return; 

        } 

        // otherwise submit form 

    }

}

vue 中可直接通过FormData的方式提交数据 要获取该表单的所有数据 可给vue-form 添加ref属性来获取?let def = this.$refs.sendinfo.$el;

<field-messages name="name" show="$dirty && $touched">

  <div slot="errorKeyA">Error message A</div>

  <div slot="errorKeyB">Error message B</div>

</field-messages>

<field-messages name="fieldName">

  <span>Success</span>

  <template slot="required" scope="state">

    <span v-if="state.$touched || state.$submitted">Name is a required field</span>

  </template>

  <template slot="errorKeyB" scope="state">

    <span v-if="state.$touched || state.$dirty">Error message B</span>

  </template>

</field-messages>

type="email"

type="url"

type="number"

required

minlength

maxlength

pattern

min (for type="number")

max (for type="number")

<!-- static validators -->

<validate>

  <input type="email" name="email" v-model="model.email" required />

</validate>

<validate>

  <input type="text" name="name" v-model="model.name" maxlength="25" minlength="5" />

</validate>



<!-- bound validators -->

<validate>

  <input type="email" name="email" v-model="model.email" :required="isRequired" />

</validate>

<validate>

  <input type="text" name="name" v-model="model.name" :maxlength="maxLen" :minlength="minLen" />

</validate>

var options = {

  validators: {

    'my-custom-validator': function (value, attrValue, vnode) {

      // return true to set input as $valid, false to set as $invalid

      return value === 'custom';

    }

  }

}



Vue.use(VueForm, options);

// or

mixins: [new VueForm(options)]

<validate>

  <input v-model="something" name="something" my-custom-validator />

</validate>

<validate :custom="{customValidator: customValidator}">

  <input v-model="something" name="something" />

</validate>

// ...

methods: {

	customValidator: function (value) {

		// return true to set input as $valid, false to set as $invalid

		return value === 'custom';

	}

}

// ...

methods: {

  debounced: _.debounce(function (value, resolve, reject) {

    fetch('https://httpbin.org/get').then(function(response){

      resolve(response.isValid);

    });

  }, 500),

  customValidator (value) {

    return new Promise((resolve, reject) => {

      this.debounced(value, resolve, reject);

    });

  }

}

<vue-form ref="form" :state="formstate">



resetState: function () {

  this.formstate._reset();

  // or

  this.$refs.form.reset();

}

cnpm install vivus

bower install vivus

<script src="https://cdn.bootcss.com/vivus/ ... gt%3B

Vivus 提供一个免费的在线的svg动画生成工具（online的） 地址为：instant

<svg id="my-svg">

  <path...>

  <path...>

  <path...>

</svg>



<script>

  new Vivus('my-svg', {duration: 200}, myCallback);

</script>

<object id="my-svg" type="image/svg+xml" data="link/to/my.svg"></object>



<script>

  new Vivus('my-svg', {duration: 200}, myCallback);

</script>

<div id="my-div"></div>



<script>

  new Vivus('my-div', {duration: 200, file: 'link/to/my.svg'}, myCallback);

</script>

创建object是会根据其父级来定大小
如果你需要定义这个object的大小 需要在onReady回调中定义

new Vivus('my-div-id', {

  file: 'link/to/my.svg'

  onReady: function (myVivus) {

    // `el` property is the SVG element

    myVivus.el.setAttribute('height', 'auto');

  }

});

用css3实现svg fill 动画

/* Style */

#mySVG * {

  fill-opacity: 0;

  transition: fill-opacity 1s;

}



#mySVG.finished * {

  fill-opacity: 1;

}

/* JavaScript */

new Vivus('mySVG', {}, function (obj) {

  obj.el.classList.add('finished');

})

var myVivus = new Vivus('my-svg-id');

myVivus

  .stop()

  .reset()

  .play(2)

var myVivus = new Vivus('my-svg-id');

myVivus.play(1, function() {

  // called after the animation completes

})



// alternativly if you leave the speed param blank and use the default, you

// can pass the callback as the first parameter like so.

myVivus.play(function() {

  // called after the animation completes

})

EASE, EASE_IN, EASE_OUT, EASE_OUT_BOUNCE

new Vivus('my-svg-id', {

    type: 'delayed',

    duration: 200,

    animTimingFunction: Vivus.EASE

}, myCallback);

bower install lockr

cnpm i lockr --save

<script src="/path/lockr.js" type="text/javascript"></script>

Lockr.prefix?- String

Lockr.prefix = 'lockr';

Lockr.set('username', 'Coyote'); 

localStorage.getItem('username');

localStorage.getItem('lockr_username');

Lockr.set?- :?[ key, value ]?{String, Number, Array or Object}

Lockr.set('username', 'Coyote'); // String

Lockr.set('user_id', 12345); // number

Lockr.set('users', [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]);

Lockr.get?- :?[ key ?/ ?hash_key ， 默认值 ]

Lockr.get('username');

> "Coyote"



Lockr.get('user_id');

> 12345



Lockr.get('users');

>  [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]



Lockr.get('score', 0):

> 0

//不存在返回设置的默认值0

Lockr.set('score', 3):

Lockr.get('score', 0):

> 3

Lockr.rm?- arguments:?[ key ]?{String}

Lockr.set('username', 'Coyote');

Lockr.get('username');

> "Coyote"

Lockr.rm('username');

Lockr.get('username');

> undefined

Lockr.sadd?- arguments?[ key, value ]{String, Number, Array or Object}

Lockr.sadd("wat", 1); // [1]

Lockr.sadd("wat", 2); // [1, 2]

Lockr.sadd("wat", 1); // [1, 2]

Lockr.sismember?- arguments?[ key, value ]

Lockr.sadd("wat", 1);

Lockr.sismember("wat", 1); // true

Lockr.sismember("wat", 2); // false

Lockr.smembers?- arguments?[ key ]

Lockr.sadd("wat", 42);

Lockr.sadd("wat", 1337);

Lockr.smembers("wat"); // [42, 1337]

Lockr.srem?- arguments?[ key, value ]

Lockr.sadd("wat", 1);

Lockr.sadd("wat", 2);

Lockr.srem("wat", 1);

Lockr.smembers("wat"); // [2]

Lockr.getAll?- arguments:?null

Lockr.getAll();

> ["Coyote", 12345, [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]]

Lockr.getAll(true);

> [{"username": "Coyote"}, {"user_id": 12345}, {"users": [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]}]

Lockr.flush()?- arguments:?null

localStorage.length;

> 3

Lockr.flush();

localStorage.length;

> 0

@charset "utf-8";

html{

	-webkit-text-size-adjust:none;

	-webkit-user-select:none;

	-webkit-touch-callout: none;

	font-family: Microsoft YaHei,'宋体' , Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;

	font-size:24px;

}

body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{

	margin:0; 

	padding:0; 

	font-weight: normal;

}

a,button,input,textarea,select{ 

	background: none; 

	-webkit-tap-highlight-color:rgba(255,0,0,0); 

	outline:none; 

	-webkit-appearance:none;

}

ol,ul{

	list-style:none;

}

a{

	text-decoration:none;

}

img{

	border:none; 

	text-decoration: none; 

}

table{

	border-collapse:collapse;

	border-spacing: 0;

}

textarea{ 

	resize:none; 

	overflow:auto;

}

.clearfix{ 

    zoom:1; 

}

.clearfix:after {

    clear:both;

    display:block;

    height:0;

    content:"";

    visibility:hidden;

}

.no-wrap-ellipsis{ 

	white-space:nowrap; 

	overflow:hidden; 

	text-overflow:ellipsis;

}

.text-justify{ 

	text-align:justify;

	text-justify:inter-ideograph;

}

@media screen and (orientation: portrait) {

/*竖屏 css*/

}

@media screen and (orientation: landscape) {

/*横屏 css*/

}

.text-nocopy {

	-webkit-touch-callout:none;

	-webkit-user-select:none;

	-khtml-user-select:none;

	-moz-user-select:none;

	-ms-user-select:none;

	user-select:none;

}

.text-copy{

	-webkit-touch-callout:text;

	-webkit-user-select:text;

	-moz-user-select:text;

	-ms-user-select:text;

	user-select:text;

}

html{-webkit-user-select:none;}

html{-webkit-touch-callout: none;}

input{-webkit-appearance:none;}

input::-webkit-input-placeholder{color:#123456;}

input:focus::-webkit-input-placeholder{color:#654321;}

a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}

body{-webkit-text-size-adjust: 100%!important;}

input::-webkit-input-speech-button {display: none;}

font-family:'\5FAE\8F6F\96C5\9ED1',tahoma,'\5b8b\4f53',"Helvetica Neue",Helvetica,Arial,sans-serif;

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">

<meta name="format-detection" content="telephone=no" />

<meta name="format-detection" content="email=no" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

	<meta content="yes" name="apple-mobile-web-app-capable">

	<meta content="black" name="apple-mobile-web-app-status-bar-style">

	<meta content="telephone=no" name="format-detection">

	<meta content="email=no" name="format-detection">

	<title>Document</title>

</head>

<body>

    content...

</body>

</html>

<div id="masonry" class="container-fluid">

 

    <div class="thumbnail">

        <div class="imgs">

            <img src="" />

        </div>

        <div class="caption">

            <div class="title"></div>

            <div class="content">

                 

            </div>

        </div>

    </div>

     

</div>

<script>

    $(function() {

     

        var masonryNode = $('#masonry');

        masonryNode.imagesLoaded(function(){

            masonryNode.masonry({

                itemSelector: '.thumbnail',

                isFitWidth: true

            });

        });

         

         

    });

</script>

// 首先将新元素添加到页面容器中

 

masonryNode.append(newItems);

// 等待新元素中的图片加载完毕

newItems.imagesLoaded(function(){

 

// 调用瀑布流布局的appended方法

    masonryNode.masonry('appended',  newItems);

});

$(window).scroll(function() {

                 

    if($(document).height() - $(window).height() - $(document).scrollTop() < 10) {

         

        if(!imagesLoading) {

            appendToMasonry();

        }

         

    }

     

});

• 固定每一个item的宽度
• 根据父级绝对定位
• js计算每一行可以排列几个 （父级总宽度 / item）= 排列个数
• 写一个空数组 循环保存每一行的下标高度
• 循环所有item获取当前行最小的高度和索引，改变当前的left和top会用到
• left的值就是当前索引*item的宽度
• top的值就是当前索引的高度
• 计算完以后重置当前索引的高度elHeight[minIndex]+= 当前的高度，依次循环就可以了
• 浏览器缩放时添加一个resize再从第三部重新计算宽度，然后循环数据，调整样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Waterfall flow</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        body {

            font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;

            font-size: 14px;

        }

        .clearfix:after{

            content: "";

            display: block;

            clear: both;

        }

        input,button,select,textarea{

            outline:none;border: none;

        }

        a{

            text-decoration: none;

        }

        ul,li{

            list-style: none;

        }

        img{

            border: none;

        }

        .wrap {

            position: relative;

            min-width: 440px;

            width: 90%;

            margin: 0 auto;

        }

        .item {

            width: 200px;

            margin: 10px;

            position: absolute;

            transition: all .6s ease-out;

            font-size: 50px;

            color: #fff;

            text-align: center;

        }

    </style>

</head>

<body>

<div class="wrap"></div>

<script src="https://cdn.bootcss.com/jquery ... gt%3B

<script>

var WaterFall = {

    init: function(){

        // 添加 item 盒子

        this.addItem();

        // 添加好盒子就开始布局

        this.layout();

        // 改变窗口时执行

        this.resize();

    },

    addItem: function(){

        var wrap = $('.wrap');

        // 生成30个div 随机高度 和 颜色

        var item = '';

        for (var i = 0; i < 30; i++) {

            item +='<div class="item" style="height:'+parseInt(Math.random() * 100 + 230)+'px;background-color:'+this.getRandColor()+'">'+i+'</div>';

        }

        wrap.append(item);

    },

    layout: function(){

        var elHeight = [];

        // 计算每一行可以存放几个 item 总宽 / item宽度

        var countWidth =  Math.floor( $('.wrap').width() / $('.item').width()); 

        // 初始化添加 第一行高度的下标  

        for (var i = 0; i < countWidth; i++) {

            elHeight[i] = 0;

        }

        // 循环 所有item  

        $('.item').each(function(index, el) {

            // apply 传入数组 取得最小的高度

            var minValue = Math.min.apply(null, elHeight);

            console.log(minValue)

            // 然后获取当前高度的索引

            var minIndex = elHeight.indexOf(minValue)

            // 修改当前的top 和 left 

            $(this).css({

                top: elHeight[minIndex],    // 获取当前索引对应的高度

                left: $(this).outerWidth(true) * minIndex    // 当前的left值为 索引 * 宽度（位于第几个）

            })

            // 当前索引的高度 += 当前 item 的高度 （比如计算第二排高度时， 就等于上一个的 top + 当前的高度）elHeight[0] += 90  下一次高度就为90 

            elHeight[minIndex] += $(this).outerHeight(true);

        });

    },

    resize: function(){

        $(window).resize(function() {

            WaterFall.layout();

        });

    },

    getRandColor: function(){

        var str = '1234567890abcdef';

        var colorStr = '#';

        for(var i =0; i < 6; i++){

            colorStr += str[ Math.floor(Math.random() * str.length) ];

        }

        return colorStr;

    }

}

WaterFall.init(); // 执行

</script>

</body>

</html>