<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();

        }

         

    }

     

});

<template id="template_step">

  <ul class="nav nav-pills nav-justified step" :class="[className]">

				<li v-for="(n,index) in list" :class="{'active': n <= step }">

					<a @click="select(index)">step{{ n }}</a>

				</li>

			</ul>

</template>



<div id="app" class="container">

  <step :list="5" :current="2" theme="progress"></step>

  <step :list="5" :current="3" theme="round"></step>

  <step :list="5" :current="1" theme="square"></step>

  <step :list="5" :current="2" theme="arrow"></step>

</div>

<script>

const map = {

	progress:'step-progress',

  round:'step-round',

  square:'step-square',

  arrow:'step-arrow'

}

Vue.component('step',{

	template:'#template_step',

  props:['list','theme','current'],

  data(){

  	return {

    	step:1

    }

  },

  computed:{  	

  	className(){

			return map[this.theme]    	

    }    

  },

  methods:{

    select(idx){

    	this.step = idx + 1

    }

  },

  mounted(){

  	this.step = typeof this.current != undefined ? this.current : 1

  }

})

new Vue({

	el:'#app'

})

</script>

.step {

  counter-reset: flag;

}

.step li {

  position: relative;

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

}

.step li a {

  cursor: pointer;

  padding: 10px 15px;

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

}

.step li a:before {

  content: counter(flag);

  counter-increment: flag;

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

}

.step li a:after {

  content: "";

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

}

.step-arrow {

  margin: 20px 0;

}

.step-arrow.unhover li a:hover,

.step-arrow.unhover li a:focus {

  background-color: #f6f6f6;

  color: #444444;

}

.step-arrow.unhover li a:hover:before,

.step-arrow.unhover li a:focus:before {

  background-color: #d2d2d2;

  color: #ffffff;

}

.step-arrow.unhover li:not(:last-child) a:hover:after,

.step-arrow.unhover li:not(:last-child) a:focus:after {

  background-color: #f6f6f6;

}

.step-arrow li {

  padding-right: 20px;

}

.step-arrow li:last-child {

  padding-right: 0;

}

.step-arrow li:nth-child(n+2) a {

  margin-left: -20px;

  border-radius: 0;

}

.step-arrow li:not(:last-child) a:after {

  position: absolute;

  top: -1px;

  right: -20px;

  width: 40px;

  height: 40px;

  transform: scale(0.707) rotate(45deg);

  z-index: 1;

  background-color: #f6f6f6;

  border-radius: 0 5px 0 50px;

  border-top: 1px solid #ffffff;

  border-right: 1px solid #ffffff;

  box-sizing: content-box;

}

.step-arrow li:not(:last-child) a:hover:after {

  background-color: #00b8f5;

}

.step-arrow li a {

  border-radius: 0;

  color: #444444;

  background-color: #f6f6f6;

}

.step-arrow li a:hover {

  background-color: #00b8f5;

  color: #ffffff;

}

.step-arrow li a:hover:before {

  background: #ffffff;

  color: #00b8f5;

}

.step-arrow li a:before {

  position: absolute;

  z-index: 2;

  width: 20px;

  height: 20px;

  line-height: 20px;

  border-radius: 20px;

  left: 3rem;

  font-weight: bold;

  font-size: 1rem;

  overflow: hidden;

  top: 10px;

  background: #d2d2d2;

  color: #ffffff;

}

.step-arrow li.active a:before {

  background: #ffffff;

  color: #00b8f5;

}

.step-arrow li.active a:after {

  background-color: #00b8f5;

}

.step-arrow li.active a,

.step-arrow li.active a:hover {

  background-color: #00b8f5;

  color: #ffffff;

}

.step-arrow li.active a:before,

.step-arrow li.active a:hover:before {

  background-color: #ffffff;

  color: #00b8f5;

}

.step-arrow li.active a:after,

.step-arrow li.active a:hover:after {

  background-color: #00b8f5 !important;

}

.step-square {

  margin-top: 40px;

}

.step-square > li:hover a:before,

.step-square > li:active a:before,

.step-square > li.active a:before {

  background-color: #00b8f5;

  color: #ffffff;

  border-color: #00b8f5;

}

.step-square > li:hover a:after,

.step-square > li:active a:after,

.step-square > li.active a:after {

  background-color: #00b8f5;

}

.step-square > li:first-child a:after {

  left: 50%;

  border-right: 1px solid #ffffff;

}

.step-square > li:last-child a:after {

  right: 50%;

  border-left: 1px solid #ffffff;

}

.step-square > li > a {

  color: #ebebeb;

}

.step-square > li > a:hover {

  background-color: #ffffff;

  color: #00b8f5;

}

.step-square > li > a:before {

  position: absolute;

  z-index: 2;

  top: -2rem;

  left: 0;

  right: 0;

  margin: 0 auto;

  width: 2rem;

  height: 2rem;

  background-color: #ffffff;

  line-height: 20px;

  border: 1px solid #ebebeb;

}

.step-square > li > a:after {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  top: -35%;

  background-color: #ebebeb;

  z-index: 1;

  height: 2px;

  border: solid #ffffff;

  border-width: 0 1px;

}

.step-square > li.active > a,

.step-square > li.active > a:focus,

.step-square > li.active > a:hover {

  color: #00b8f5;

  background: transparent;

}

.step-round {

  margin-top: 40px;

}

.step-round > li:first-child > a:after {

  left: 30%;

  border-radius: 5px 0 0 5px;

}

.step-round > li:last-child > a:after {

  right: 30%;

  border-radius: 0 5px 5px 0;

}

.step-round > li.active > a,

.step-round > li.active > a:hover,

.step-round > li.active > a:focus {

  background: transparent;

  color: #00b8f5;

}

.step-round > li.active > a:before,

.step-round > li.active > a:hover:before,

.step-round > li.active > a:focus:before {

  background-color: #00b8f5;

  color: #ffffff;

}

.step-round > li.active > a:after,

.step-round > li.active > a:hover:after,

.step-round > li.active > a:focus:after {

  background-color: #00b8f5;

}

.step-round > li > a {

  color: #ebebeb;

}

.step-round > li > a:before {

  position: absolute;

  z-index: 2;

  top: -2rem;

  left: 0;

  right: 0;

  margin: 0 auto;

  width: 2rem;

  height: 2rem;

  border-radius: 50%;

  background-color: #ffffff;

  line-height: 2rem;

  box-shadow: 0 0 0 5px #ebebeb;

}

.step-round > li > a:after {

  position: absolute;

  left: 0;

  right: 0;

  top: -38%;

  background-color: #ebebeb;

  z-index: 1;

  height: 8px;

}

.step-round > li > a:after:after {

  background-color: #00b8f5;

}

.step-round > li > a:hover {

  background: transparent;

  color: #00b8f5;

}

.step-round > li > a:hover:before {

  background-color: #00b8f5;

  color: #ffffff;

}

.step-round > li > a:hover:after {

  background-color: #00b8f5;

}

.step-progress {

  margin-top: 60px;

}

.step-progress > li > a {

  color: #ebebeb;

  padding-top: 1.8rem;

}

.step-progress > li > a:before {

  position: absolute;

  z-index: 2;

  top: -35px;

  left: 0;

  right: 0;

  margin: 0 auto;

  width: 2rem;

  height: 2rem;

  border-radius: 50%;

  line-height: 2rem;

  box-shadow: 0 0 0 5px #ebebeb;

}

.step-progress > li > a:after {

  content: "";

  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));

  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);

  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));

  -webkit-background-size: 40px 40px;

  background-size: 40px 40px;

  background-color: #ebebeb;

  float: left;

  width: 100%;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  height: 10px;

  transition: all 0.5s ease-in-out;

  -webkit-transition: all 0.5s ease-in-out;

  -ms-transition: all 0.5s ease-in-out;

}

.step-progress > li > a span.caret {

  position: absolute;

  left: 0;

  right: 0;

  margin: 0 auto;

  transform: rotate(180deg);

  top: -4px;

}

.step-progress > li > a:hover {

  background: transparent;

  color: #00b8f5;

}

.step-progress > li > a:hover:before {

  color: #ffffff;

  background-color: #00b8f5;

}

.step-progress > li > a:hover:after {

  background-color: #00b8f5;

}

.step-progress > li.active > a,

.step-progress > li.active > a:hover,

.step-progress > li.active > a:focus {

  color: #00b8f5;

  background: transparent;

}

.step-progress > li.active > a:before,

.step-progress > li.active > a:hover:before,

.step-progress > li.active > a:focus:before {

  background-color: #00b8f5;

  color: #ffffff;

}

.step-progress > li.active > a:after,

.step-progress > li.active > a:hover:after,

.step-progress > li.active > a:focus:after {

  background-color: #00b8f5;

}

.step-progress > li.active > a:after {

  -webkit-animation: progress-bar-stripes 2s linear infinite;

  -o-animation: progress-bar-stripes 2s linear infinite;

  animation: progress-bar-stripes 2s linear infinite;

}

.step-progress > li:first-child a:after {

  border-radius: 5px 0 0 5px;

}

.step-progress > li:last-child a:after {

  border-radius: 0 5px 5px 0;

}

/*step-progress*/

			$(function() {

				bsStep();

				//bsStep(i) i 为number 可定位到第几步 如bsStep(2)/bsStep(3)

			})

<!DOCTYPE html>

<html>



	<head>

		<meta charset="UTF-8">

		<title></title>

		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

		<style>

			.nav>li>a {

				border-radius: 0;

				cursor: pointer;

				color: #101010;

			}

			

			#pmenu a {

				cursor: pointer;

			}

			

			#pmenu .active a {

				background-color: lightgrey;

				color: #080808;

				border-radius: 0;

			}

			

			#cmenu {

				background-color: lightgrey;

			}

			

			#cmenu li {

				padding: 10px 5px;

			}

			

			#cmenu .active a {}

		</style>

	</head>



	<body>

		<div id="app">

			<topnav></topnav>

		</div>

		<!--template-->

		<template id="topnav-comp">

			<div>

				<ul class="nav nav-pills nav-justified" id="pmenu">

					<li v-for="(nav,index) in navlist" :class="{active:iscurP==index}" @click="iscurP=index">

						<a @click="getChild(index)">{{nav.name}}</a>

					</li>

				</ul>

				<ul class="nav nav-pills" id="cmenu">

					<li v-for="(navc,index) in navchild" :class="{active:iscurC==index}" @click="iscurC=index">

						<a>{{navc.name}}</a>

					</li>

				</ul>

			</div>

		</template>

		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>

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

		<script>

			Vue.component('topnav', {

				template: '#topnav-comp',

				data: function() {

					return {

						iscurP: 0,

						iscurC: 0,

						navlist: [],

						navchild: []

					}

				},

				methods: {

					getNavlist: function() {

						var self = this

						$.ajax({

							url: 'data/navlist.json',

							type: 'get',

							async: false,

							dataType: "json",

							success: function(data) {

								self.navlist = data;

							},

							error: function() {

								console.log('%c 数据加载失败,请检查数据是否存在', 'background: #222; color: #bada55')

							}

						});

					},

					getChild: function(index) {

						this.navchild = this.navlist[index].sub_categories;

						this.iscurC = 0

					}

				},

				mounted: function() {},

				created: function() {

					this.getNavlist();

				}

			});

			vm = new Vue({

				el: "#app"

			})

		</script>

	</body>



	</htm

line-height：normal

<script src="//cdn.bootcss.com/jqueryui/1.12.0/jquery-ui.js"></script>



$(document).on('show.bs.modal','.modal', function() {

?? ?$.fn.draggable && $('.modal-content',this).draggable({

?? ??? ?containment: 'document',

?? ??? ?scroll: false,

?? ??? ?handle: '.modal-header'

?? ?});

?? ?

?? ?$('.modal-dialog',this).css({

?? ??? ?position:'absolute',

?? ??? ?top:'50%',

?? ??? ?left:'50%',

?? ??? ?transform: 'translate(-50%, -50%)'

?? ?})

})

.ui-autocomplete{

    display:block;

    z-index:99999;

}