毕设开发时的小随笔（4）

先祝大家新年快乐哈~~

19年2月11日，毕设目前开发到第二阶段了，总结一下最近的坑和点。

第一点是过完年回来开发feed流模块，遇到了使用js滚动条下滑底部触发ajax请求更多数据,这个只算个点，计算好窗口滚动到底部的距离，然后使用ajax请求服务器拉去redis的数据就行，因为我这是流，在数据源足够大的情况下，是可以一直向下滚动拉去数据，知道数据源数据全部读取完毕为止。我的毕设是当访问流首页的时候，会取数据源（下面简称池子）里的前10条，因为我的前端一屏只展示10条，向下滚动的话就会出发ajax获取更多数据通过js向ul标签里追加html代码，这样的话能将从服务器端获取的信息加工后插入原有流的底部。这里有个问题就是当前流的偏移量和获取量的设置，偏移量我是直接用js获取ul对象，然后获取ul对象下的li的个数，这样的话每次ajax请求的时候都会获取一下当前li的个数，这个个数就代表着偏移量，而获取量为了简单，我直接用偏移量+10这样offset和size都有了，就能很方便的获取redis中排好序的流数据了。

   (function ($){
        var $tiles = $('#tiles'),
            $handler = $('li', $tiles),
            $main = $('#main'),
            $window = $(window),
            $document = $(document),
            options = {
                autoResize: true, // This will auto-update the layout when the browser window is resized.
                container: $main, // Optional, used for some extra CSS styling
                offset: 20, // Optional, the distance between grid items
                itemWidth:280 // Optional, the width of a grid item
            };
        /**
         * Reinitializes the wookmark handler after all images have loaded
         */
        function applyLayout() {
            $tiles.imagesLoaded(function() {
                // Destroy the old handler
                if ($handler.wookmarkInstance) {
                    $handler.wookmarkInstance.clear();
                }

                //创建处理对象
                $handler = $('li', $tiles);
                $handler.wookmark(options);
            });
        }

        /**
         * 滚动事件函数
         */
        function onScroll() {
            // 设置触发高度
            var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix
                closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100);
            //获取当前ul对象
            var tiles = document.getElementById('tiles');
            //获取当前ul下li标签的个数
            var li_num = tiles.getElementsByTagName('li').length;
            //赋值偏移量及每次增量请求个数
            var offset = li_num;
            var size = offset + 10;
            if (closeToBottom) {
                $.ajax({
                    url:'more_feed_info',
                    type:'POST',
                    dataType:'json',
                    data:{'offset':offset,'size':size},
                    success:function (data) {
                        if (data.error_code == 0){
                            for (var i = 0 ; i < data.rdata.length ; i++){
                                //拼凑html
                                var popContent =
                                    '<a href="'+data.rdata[i].jump_to+'" target="_blank">'+
                                    '<li>'+
                                    '<img src="'+data.rdata[i].image+'" width="200" height="333">'+
                                    '<div class="post-info">'+
                                    '<div class="post-basic-info">'+
                                    ' <h3><a href="#">'+data.rdata[i].article_name+'</a></h3>'+
                                    '<span><a href="#"><label></label>'+data.rdata[i].article_author+'</a></span>'+
                                    '<p>'+data.rdata[i].article_intro+'</p>'+
                                    '</div>'+
                                    '<div class="post-info-rate-share">'+
                                    '<div>'+
                                    '&nbsp;<span style="font-size: smaller;color: rgba(96,98,138,0.34)">'+data.rdata[i].modification_time+'</span>'+
                                    '</div>'+
                                    '<div>'+
                                    ' <span> </span>'+
                                    '</div>'+
                                    '<div class="clear"> </div>'+
                                    '</div>'+
                                    '</div>'+
                                    '</li>'+
                                    '</a>'
                                //将拼凑好的html追加到对象中
                                $tiles.append(popContent);
                                applyLayout();
                            }
                        }
                    },
                    error:function (error) {
                        alert('网络异常');
                    }
                });

            }
        };

        applyLayout();

        $window.bind('scroll.wookmark', onScroll);
    })(jQuery);

是我的一个小坑，我使用ci框架登录后获取用户信息并将用户信息存在临时session即ci中的tempdata中，当我退出登录的时候只unset了user_id,并没有注销其他的信息比如用户头像和昵称，这就导致了，当切换账号登录的时候，上个用户的头像发及昵称仍然存在，在我检查了session内的数据后发现这个问题，就修改了，在此记录一下。

这个是关于html属性的。我的毕设里要实现给信息点赞或者踩及关注的功能，于是我就找了俩赞踩图片放在页面里，看着还行，但是如果加上了button,他们仨就虽然在一行但是不能垂直对齐，这就很痛苦，我百度了一下，最后决定使用html属性中的vertical-align:middle 这个属性，加在了这三个东西后面然后就可以完美对齐

<div class="clear">
                        <span><a href="javascript:void(0)"><image src = "<?php echo site_url('assets/images/good.png')?>"  style="vertical-align: middle"></image></a></span>
                        &nbsp;&nbsp;
                        <span><a href="javascript:void(0)"><image src = "<?php echo site_url('assets/images/bad.png')?>"  style="vertical-align: middle"></image></a></span>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span><button  style="vertical-align: middle">关注作者</button></span>
</div>