初次发布

bh-lay · May 30, 2019 · df88102 · df88102
1 parent 7877a7e
commit df88102
Show file tree

Hide file tree

Showing 7 changed files with 3,379 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+  <style type="text/css">
+    body{
+      margin: 0;
+      padding: 0;
+      background:#333;
+    }
+    .container{
+      position: relative;
+      margin: 40px 40px;
+    }
+    .footer{
+      height: 200px;
+      background: #555;
+    }
+  </style>
+  <style type="text/css">
+    .card {
+      background: #fff;
+    }
+    .card img{
+      display: block;
+      width: 100%;
+      background: #aaa;
+    }
+    .card h2{
+      margin: 0;
+      padding: 10px 15px;
+      font-size: 18px;
+    }
+    .card p{
+      margin: 0;
+      padding: 10px 15px;
+      font-size: 14px;
+    }
+  </style>
+</head>
+<body>
+<div id="app"></div>
+<div class="footer"></div>
+<script src="vue.min.js"></script>
+<script type="text/javascript" src="../dist/vue-stick.umd.js"></script>
+<script>
+  // 需要编译器
+  new Vue({
+    el: '#app',
+    data: {
+      list: [
+        {"_id":"5cd018610c45d60656e393c6","id":"23qfgkjzm2y","title":"合肥城中村 - 全景摄影计划","cover":"http://static.bh-lay.com/blog/village-in-city/城中村仰视.jpg","time_show":"1557158617263","author":"剧中人","intro":"小剧将会在接下来的时间里，去寻找、发现、并拍摄合肥市现存的城中村。其实城市变化很快，只是我们身在变化之中感受不强而已。我希望可以借助于影像的力量，凝固住一个个城中村最后的身姿。"},
+        {"_id":"5c9f9e927518581101795c10","id":"169cf836d71","title":"为什么小剧客栈没有友情链接","cover":"","time_show":"1554114024188","author":"剧中人","intro":"熟悉小剧的同学应该都知道，小剧客栈上面没有友情链接这样一个东西。很多朋友问过小剧这个问题，我也给过很多版本的原因，今天就来详细说一下为什么小剧客栈没有友情链接。"},
+        {"_id":"5c3b6ea83a1428b727b1e3f8","author":"剧中人","cover":"http://static.bh-lay.com/blog/2018-summary/share.jpg","id":"16848284243","intro":"2018 年对于我来说是非常特殊的一年，一整年工作强度非常大，但依旧会抽出时间去寻找自己的诗和远方。这一年在业余生活上做了很多从未有过的尝试，也因为一些兴趣爱好结交到一帮有趣的小伙伴。","time_show":"1547398824504","title":"剧中人的2018年终总结"},
+        {"_id":"5bb4c85d7e5fe47f63277327","author":"剧中人","cover":"http://static.bh-lay.com/blog/2018-bi-layout/layout-data-model.png","id":"1663a2eabae","intro":"今天的分享主要围绕 可视化布局模块 的一些工作，本文主要从可视化布局模块的交互逻辑的设计上展开，并未涉及到具体代码实现，作为 Odeon 大数据平台在可视化布局模块的一些思路。","time_show":"1538574233744","title":"可视化布局模块开发分享"},
+        {"_id":"5b3822749ff7bd5b48f58e46","author":"剧中人","cover":"http://static.bh-lay.com/blog/2018-iflytek-shushan/topic-graphy.jpg","id":"164534698df","intro":"大蜀山登顶活动是讯飞历次周年庆必有的活动，第一次参加公司全员的登山活动还是挺兴奋的。有幸的是这次小剧是以航拍摄影的身份参与周年庆，简单记录下小剧在登山活动上的一些事，与大家分享。","time_show":"1530405077207","title":"讯飞19周年庆拍摄小记"},
+        {"_id":"5b0f6072cb39a1de42fe5586","author":"剧中人","cover":"http://static.bh-lay.com/blog/2018-720yun/take-the-prize.jpg","id":"163b410c046","intro":"上周五，小剧脑袋一热请假去了趟北京，千里迢迢去参加了720云主办的产品发布会。按说这类发布会在家看直播更有意思，为什么小剧要劳民伤财的跑到现场去呢？","time_show":"1527722733159","title":"720云产品发布会小记"},
+        {"_id":"5ac9ceffbe8c9bd40351a3a0","author":"","cover":"http://static.bh-lay.com/blog/2018-album/yangpuwujiaochang.jpg","id":"162a45095e3","intro":"最近闲着无聊，整理了自己觉得还算看得过去的照片，特意挑出五张印刷了二十套。假模假式的拆掉四套照片，模仿着大神的方式做了下签名。","time_show":"1523175167455","title":"记一次「随意」的照片赠送"},
+        {"_id":"5a98a7028c538e76798825a1","author":"剧中人","cover":"http://static.bh-lay.com/blog/webpack-async-module/cover.jpg","id":"161e44c6356","intro":"虽然项目代码经过打包压缩并且有拆分，但是页面在初始化时，这些资源都会一股脑地被加载到页面中。随着项目越来越大，滚雪球效应导致首屏加载时长的问题会越来越明显。因此适当的剥离部分模块，在需要使用的时候按需加载显得格外重要。","time_show":"1519952212920","title":"Webpack 异步模块实现"},
+        {"_id":"5a4ba480e0cd347718d15068","author":"剧中人","cover":"http://static.bh-lay.com/blog/see-hefei/cover-2.jpg","id":"160b77a9518","intro":"再次见到合肥，在历经五年的沪漂之后，以一种渴望被接纳的姿态来到合肥。这篇文章作为【上海 · 再见】的下篇，原计划在2017年9月前后完成。很遗憾一直拖到了四个月后的2018年。既然已经拖了这么久，索性就当作2017年全年回顾好了。以八月为分界线，聊聊小剧这一年的经历。","time_show":"1514906669150","title":"再见 · 合肥"},
+        {"_id":"5a354eaf29755ea750e25438","author":"","cover":"http://static.bh-lay.com/blog/odeon-shoot/odeon-1.jpg","id":"160603b5cff","intro":"这次拍摄也只是小剧的处女作，并没有多少经验作指导，仅仅是根据自己的思路临场做的尝试。好在团队的小伙伴比较耐心，不厌其烦地微调位置，经过反复拍摄，最终完成了此次拍摄。","time_show":"1513442991333","title":"记一次团队主题航拍"}
+      ]
+    },
+    components: {Stick},
+    template: '<div class="container"><Stick v-bind:list="list"><template slot-scope="scope">' + 
+      '<div class="card">' +
+        '<img :src="scope.data.cover" v-if="scope.data.cover" />' +
+        '<h2>{{scope.data.title}}</h2>' +
+        '<p>{{scope.data.intro}}</p>' +
+      '</div>' +
+    '</template></Stick></div>'
+  })
+</script>
+<script type="text/javascript">
+
+// //定义瀑布流组件
+// var stick = new Stick({
+//   container: document.getElementById('container'),
+//   column_width: 200,
+//   column_gap: 10,
+//   load_spacing: 200,
+//   onNeedMore: loadMore
+// });
+// //加载第一页
+// loadMore();
+
+// /**
+//  * 模拟ajax加载，提供假数据
+//  **/
+// var loadTime = 0;
+// function loadMore(){
+//   //模拟加载完毕
+//   if(++loadTime >= 5){
+//     return
+//   }
+//   //模拟ajax延迟
+//   setTimeout(function(){
+//     list = [
+//       {},{},{},{},{},{},{},{},
+//       {},{},{},{},{},{},{},{}
+//     ];
+//     list.forEach(function(item) {
+//       var html= '<div class="item" style="height:' + Math.floor(Math.random() * 250 + 150) + 'px">';
+//       stick.addItem(html, item.cover);
+//     });
+//   },300);
+// }
+</script>
+</body>
+</html>
diff --git a/demo/vue.min.js b/demo/vue.min.js