iOS全棧之路，为微信应用号打基础，（必敲篇）之瀑布流

前言

其实iOS早就已经不火了，现在随便发个招聘每天都有几百份简历，所以我打算通过这个教程让某部分人走上救赎之路，这次我主要想分享通过JS中的React Native和Node.js帮大家打通前后端，保持竞争力，只要你认真跟着学习，10天可以让你有一个质的改变，下面先发一波基础教程，后面直接上项目，如果有人零基础的，也可以留言，我想办法补一些更基础的教程

本次内容

iOS全棧之路，这标题之前引起了很多iOS 的开发者的热讨论，下面补充一下我想说的，js除了开发全棧应用之外，可以弥补iOS很多的问题，因为苹果本身是封闭的，如果要修改app的bug需要上传ipa包还有等待认证，但是js这些框架却能完美解决一下这些问题，另外框架的底层都是利用了iOS的runtime机制，真的有必要好好的研究和学习，无论你是移动端还是前端，趋势是不可阻挡的，你可以不学习，但必须要去了解的

---

最后补一句，我写这些也是很辛苦的，也是没有报酬的，麻烦大家评论时下手轻一点，对那些真的有兴趣的人也是不公平的！

html的

里面图片文件可以自己随便添加，只是为了演示效果而已

    
    
    


    
    

         
         

              

                  
                  

                      价格:999
                      还剩9件
                  
              
         

        

            

        
        

            

        
        

            

        
        

            

        
        

            

        
        

            

        
        

            

        
        

            

        
        

            

        
        

            

        
        

            

        
        

            

        
        

            

        
        

            

        
        

            

        
        

            

        
        

            

        
        

            

        
        

            

        
        

            

        
        

            

        
        

            

        
        

            

        
    



    

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 标准模式  混杂模式
    var clientHeight = document.body.clientHeight || document.documentElement.clientHeight;

    // 1.4 求出页面偏离浏览器的高度
    var scrollTopHeight = document.body.scrollTop;

    // 1.5 判断返回
    return lastBoxDis <= clientHeight + scrollTopHeight;
}