iOS全棧之路，为微信应用号打基础，（必敲篇）之瀑布流
2016-09-22 本文已影响1370人
子祖
前言
其实iOS早就已经不火了，现在随便发个招聘每天都有几百份简历，所以我打算通过这个教程让某部分人走上救赎之路，这次我主要想分享通过JS中的React Native和Node.js帮大家打通前后端，保持竞争力，只要你认真跟着学习，10天可以让你有一个质的改变，下面先发一波基础教程，后面直接上项目，如果有人零基础的，也可以留言，我想办法补一些更基础的教程
本次内容
iOS全棧之路，这标题之前引起了很多iOS 的开发者的热讨论，下面补充一下我想说的，js除了开发全棧应用之外，可以弥补iOS很多的问题，因为苹果本身是封闭的，如果要修改app的bug需要上传ipa包还有等待认证，但是js这些框架却能完美解决一下这些问题，另外框架的底层都是利用了iOS的runtime机制，真的有必要好好的研究和学习，无论你是移动端还是前端，趋势是不可阻挡的，你可以不学习，但必须要去了解的
最后补一句，我写这些也是很辛苦的，也是没有报酬的，麻烦大家评论时下手轻一点，对那些真的有兴趣的人也是不公平的！
html的
里面图片文件可以自己随便添加，只是为了演示效果而已
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流效果</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--父盒子-->
<div id="main">
<!--子盒子-->
<div class="box">
<div class="pic">
<img src="images/0.jpg">
<div>
<span>价格:999</span>
<span>还剩9件</span>
</div>
</div>
</div>
<div class="box">
<div class="pic"><img src="images/1.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/2.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/3.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/4.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/5.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/6.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/7.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/8.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/9.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/10.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/11.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/12.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/13.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/14.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/15.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/16.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/17.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/18.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/19.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/20.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/21.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/22.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="images/23.jpg" alt=""></div>
</div>
</div>
<script src="js/index.js" type="text/javascript"></script>
<!--<script>-->
<!--alert(0);-->
<!--</script>-->
</body>
</html>
css的
*{
padding: 0;
margin: 0;
}
#main{
/*定位*/
position: relative;
}
.box{
float: left;
/*内边距*/
padding: 15px 0 0 15px;
/*background-color: red;*/
}
.pic{
border:1px solid #dddddd;
padding: 10px;
background-color: white;
border-radius: 5px;
}
.pic img{
width: 165px;
}
JS来实现瀑布流
// === 值比较 类型比较
function $(id) {
return typeof id === 'string' ? document.getElementById(id) : id
}
// 当窗口加载完毕
window.onload = function () {
// 瀑布流布局
WaterFall('main', 'box');
// 滚动加载盒子
window.onscroll = function () {
if(CheckWillLoad()){ // 具备滚动的条件
// 造数据
var dataArr = [{'src': '10.jpg'},{'src': '11.jpg'},{'src': '13.jpg'},{'src': '16.jpg'},{'src': '18.jpg'},{'src': '20.jpg'},{'src': '40.jpg'},{'src': '30.jpg'}];
// 遍历
for(var i=0; i<dataArr.length; i++){
// 创建子盒子
var newBox = document.createElement('div');
newBox.className = 'box';
$('main').appendChild(newBox);
var newPic = document.createElement('div');
newPic.className = 'pic';
newBox.appendChild(newPic);
var newImg = document.createElement('img');
newImg.src = 'images/' + dataArr[i].src;
newPic.appendChild(newImg);
}
// 重新实现瀑布流布局
WaterFall('main', 'box');
}
}
};
// http://blog.sina.com.cn/s/blog_966e43000101bplb.html
// 瀑布流布局
function WaterFall(parent, child) {
// ------ 父盒子居中
// 1.1 拿到所有的子盒子
var allBox = document.getElementsByClassName(child);
// 1.2 求出其中一个盒子的宽度
var boxWidth = allBox[0].offsetWidth;
// 1.3 求出页面的宽度
var clientWidth = document.body.clientWidth;
// 1.4 求出列数
var cols = Math.floor(clientWidth / boxWidth);
// 1.5 父盒子居中 css赋值都是String类型
$(parent).style.width = boxWidth * cols + 'px';
$(parent).style.margin = '0 auto';
// ------ 子盒子的定位
// 1.1 定义高度数组
var heightArr = [];
// 1.2 遍历所有的盒子
for(var i=0; i<allBox.length; i++){
// 1.2.1 取出单个盒子的高度
var boxHeight = allBox[i].offsetHeight;
// 1.2.2 判断
if(i < cols){ // 第一行
heightArr.push(boxHeight);
}else{ // 剩余的行
// 取出数组中最矮的盒子的高度
var minBoxHeight = Math.min.apply(this, heightArr);
// 取出数组中最矮的盒子的索引
var minBoxIndex = GetMinBoxIndex(heightArr, minBoxHeight);
// 子盒子定位
allBox[i].style.position = 'absolute';
allBox[i].style.top = minBoxHeight +'px';
allBox[i].style.left = boxWidth * minBoxIndex + 'px';
// 更新数组中最矮盒子的高度
heightArr[minBoxIndex] += boxHeight;
}
}
// console.log(heightArr, minBoxHeight, minBoxIndex);
}
// 获取最矮盒子的索引
function GetMinBoxIndex(arr, value) {
for(var i=0; i<arr.length; i++){
if (arr[i] == value) return i;
}
}
// 判断是否具备加载条件
function CheckWillLoad() {
// 1.1 获取最后的一个盒子
var allBox = document.getElementsByClassName('box');
var lastBox = allBox[allBox.length - 1];
// 1.2 求出高度的一半 + 头部偏离的高度
var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;
// 1.3 求出页面的高度 JS存在兼容性问题 ---> 标准模式 混杂模式
var clientHeight = document.body.clientHeight || document.documentElement.clientHeight;
// 1.4 求出页面偏离浏览器的高度
var scrollTopHeight = document.body.scrollTop;
// 1.5 判断返回
return lastBoxDis <= clientHeight + scrollTopHeight;
}
