legend3---解决bootstrap栅格系统自动图片高度不齐问题

legend3---解决bootstrap栅格系统自动图片高度不齐问题

一、总结

一句话总结：

根据不同的屏幕宽度，放到不同的div盒子里面即可，和bootstrap栅格系统保持一致

<div id="lesson_img_group_1" class="clearfix lesson_img_group"></div>

二、解决bootstrap栅格系统自动图片高度不齐问题

博客对应课程的视频位置：

解决问题一：

如下课程列表中图片的大小可能不一样，用栅格系统会出现对不齐问题

解决方法是：根据不同的屏幕宽度，放到不同的div盒子里面即可，和bootstrap栅格系统保持一致

解决问题二：

不同尺寸下要保证图片栅格系统的正常适应性显示

解决问题三：

保证在不同屏幕下的显示都是满的，比如2*5，比如3*3，比如4*2，不会出现3*2+2这样的情况

{{--1、用php变量接收外部变量，在外部要把lesson数据赋值给$lesson_list--}}
{{--1、$lessons=>$lesson_list，$likeLessons_l_ids，$collectLessons_l_ids--}}
<script>
    @if(isset(Auth::guard('user')->user()->id))
        window.has_login=true;
    @else
        window.has_login=false;
    @endif
</script>

{{--懒加载--}}
@include('home.app.lazyload')

{{--
传10个数据过来，如果是宽的，用2*4个，如果是中等宽的，用3*3

--}}

<div id="lesson_img_group_row" class="row">
    <div id="lesson_img_group_1" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_2" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_3" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_4" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_5" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_6" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_7" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_8" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_9" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_10" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_11" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_12" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_13" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_14" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_15" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_16" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_17" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_18" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_19" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_20" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_21" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_22" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_23" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_24" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_25" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_26" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_27" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_28" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_29" class="clearfix lesson_img_group"></div>
    <div id="lesson_img_group_30" class="clearfix lesson_img_group"></div>


    <div id="lesson_img_group_init">
        @foreach($lesson_list as $lesson)
            <div class="col-md-3 col-sm-4 col-xs-6 lesson_box_item" style="margin-bottom: 20px;">
                <div id="lesson_img_box" class="choose_lesson_box" >
                    <div class="choose_lesson_imgbox">
                        <a href="/lesson/{{$lesson['l_id']}}">
                            {{--<img src="{{$lesson['l_preview']}}" style="max- 100%;min-height: 80px;" alt="">--}}
                            {{--图片懒加载--}}
                            {{--data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==--}}
                            <img class="fry_lazy"
                                 src="{{config('staticfiles.PATH')}}/images/loading3.gif"
                                 data-src="{{$lesson['l_preview']}}"
                                 data-srcset="{{$lesson['l_preview']}} 350w"
                                 style="max- 100%;min-height: 80px;" alt="">
                        </a>
                        <a href="/lesson/{{$lesson['l_id']}}" class="choose_lesson_start_learn">
                                            <span class="choose_lesson_start_learn_content">
                                                开始学习
                                            </span>
                        </a>
                    </div>
                    <div class="choose_lesson_info_box">
                        <div class="choose_lesson_info_box_author" >
                            <span class="label label-warning">范仁义</span>
                        </div>
                        <div class="choose_lesson_info_box_time">
                            <span class="label label-warning">{{$lesson['l_video_num']}}课时</span>
                        </div>
                    </div>


                    <div class="choose_lesson_title" style="text-align: center;margin-top: 5px;">
                        <a class="choose_lesson_title_a font_cut" style="display: inline-block;" href="/lesson/{{$lesson['l_id']}}">
                            {{$lesson['l_title']}}
                        </a>
                        <div style="display: none;">会员优惠：8元 <del><i>10元</i></del></div>

                        <div class="video_interaction_box font_cut" style="font-size: 12px; 100%;">

                            {{--点赞--}}
                            <div class="video_interaction_box_like" style="margin-right: 3px;">
                                                <span style="@if(in_array($lesson['l_id'],$likeLessons_l_ids)) display:none; @endif" l_id="{{$lesson['l_id']}}" class="fa_like">
                                                    <i class="fa fa-thumbs-o-up fa-fw" aria-hidden="true"></i>
                                                    <span>@if(in_array($lesson['l_id'],$likeLessons_l_ids)) {{$lesson['l_like']-1}} @else {{$lesson['l_like']}} @endif </span>
                                                </span>
                                <span style="color: red;@if(!in_array($lesson['l_id'],$likeLessons_l_ids)) display:none; @endif"  l_id="{{$lesson['l_id']}}" class="fa_like_no">
                                                    <i class="fa fa-thumbs-up fa-fw"  aria-hidden="true"></i>
                                                    <span>@if(in_array($lesson['l_id'],$likeLessons_l_ids)) {{$lesson['l_like']}} @else {{$lesson['l_like']+1}} @endif</span>
                                                </span>

                            </div>

                            {{--收藏--}}
                            <div class="video_interaction_box_collect" style="margin-right: 3px;">
                                                <span style="@if(in_array($lesson['l_id'],$collectLessons_l_ids)) display:none; @endif" l_id="{{$lesson['l_id']}}" class="fa_collect">
                                                    <i class="fa fa-heart-o fa-fw " aria-hidden="true"></i>
                                                    <span>@if(in_array($lesson['l_id'],$collectLessons_l_ids)) {{$lesson['l_collect_num']-1}} @else {{$lesson['l_collect_num']}} @endif </span>
                                                </span>
                                <span style="color: red;@if(!in_array($lesson['l_id'],$collectLessons_l_ids)) display:none; @endif" l_id="{{$lesson['l_id']}}" class="fa_collect_no">
                                                    <i class="fa fa-heart fa-fw" aria-hidden="true"></i>
                                                    <span>@if(in_array($lesson['l_id'],$collectLessons_l_ids)) {{$lesson['l_collect_num']}} @else {{$lesson['l_collect_num']+1}} @endif </span>
                                                </span>
                            </div>

                            {{--浏览--}}
                            <div class="video_interaction_box_click"  style="margin-right: 0;">
                                <i class="fa fa-play-circle-o fa-fw" aria-hidden="true"></i>
                                <span>{{$lesson['l_click']}}</span>
                            </div>

                        </div>

                        <a href="/lesson/{{$lesson['l_id']}}">
                            <span class="splay" style="opacity: 0; margin-top: 105px;display: none;">开始学习</span>
                        </a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>


</div>




<script>
    //
    {{--课程的点赞操作--}}
    $('.fa_like').click(function () {

        if(window.has_login){
            let l_id=$(this).attr('l_id');
            let _this=$(this);
            //console.log(l_id);
            $.post("/like_lesson", {'l_id':l_id,'_token':'{{csrf_token()}}'} ,function (data) {
                //console.log(data);
                if(parseInt(data.valid)==1){
                    _this.hide();
                    _this.parent().find('.fa_like_no').show();
                    layer_alert_success_mobile(data.message);
                }else{
                    layer_alert_fail_mobile(data.message);
                }
            });
        }
        else{
            layer_alert_get_content_mobile('.login_layer');
        }

    });
    //
    {{--取消课程点赞操作--}}
    $('.fa_like_no').click(function () {
        if(window.has_login){
            let l_id=$(this).attr('l_id');
            let _this=$(this);
            //console.log(l_id);
            $.post("/cancel_like_lesson", {'l_id':l_id,'_token':'{{csrf_token()}}'} ,function (data) {
                //console.log(data);
                if(parseInt(data.valid)==1){
                    _this.hide();
                    _this.parent().find('.fa_like').show();
                    layer_alert_success_mobile(data.message);
                }else{
                    layer_alert_fail_mobile(data.message);
                }
            });
        }
        else{
            layer_alert_get_content_mobile('.login_layer');
        }


    });
    {{--课程的收藏操作--}}
    //
    $('.fa_collect').click(function () {
        if(window.has_login){
            let l_id=$(this).attr('l_id');
            let _this=$(this);
            //console.log(l_id);
            $.post("/collect_lesson", {'l_id':l_id,'_token':'{{csrf_token()}}'} ,function (data) {
                //console.log(data);
                if(parseInt(data.valid)==1){
                    _this.hide();
                    _this.parent().find('.fa_collect_no').show();
                    layer_alert_success_mobile(data.message);
                }else{
                    layer_alert_fail_mobile(data.message);
                }
            });
        }
        else{
            layer_alert_get_content_mobile('.login_layer');
        }

    });
    //
    {{--课程的取消收藏操作--}}
    $('.fa_collect_no').click(function () {
        if(window.has_login){
            let l_id=$(this).attr('l_id');
            let _this=$(this);
            //console.log(l_id);
            $.post("/cancel_collect_lesson", {'l_id':l_id,'_token':'{{csrf_token()}}'} ,function (data) {
                //console.log(data);
                if(parseInt(data.valid)==1){
                    _this.hide();
                    _this.parent().find('.fa_collect').show();
                    layer_alert_success_mobile(data.message);
                }else{
                    layer_alert_fail_mobile(data.message);
                }
            });
        }
        else{
            layer_alert_get_content_mobile('.login_layer');
        }

    });
</script>

{{--懒加载--}}
<script>
    var fry_lazy_load = new LazyLoad({
        elements_selector: "img.fry_lazy",
        threshold:500
    });
</script>
{{--解决懒加载部分图片加载不出来的问题--}}

{{--
1、估计双层是没有这个问题的
-
--}}

{{--<script>--}}
    {{--// window.onresize = function() {--}}
    {{--//     alert('触发成功');--}}
    {{--// };--}}
    {{--$(function () {--}}
        {{--//let myEvent = new Event('resize');--}}
        {{--//window.dispatchEvent(myEvent);--}}
    {{--});--}}
{{--</script>--}}

{{--
动态的调整图片框的高度
将课程图片的高度调整我图片列表中最高图片的高度
--}}
{{--
每过0.1s自动将所有课程图片的高度调整为最大高度
--}}
<script>
/*  废弃  */
    function fry_align_img(element){
        let lesson_img_max_height=0;

        {{--获取图片最大高度--}}
        $(element).each(function () {
            let height=parseFloat($(this).css("height"));
            console.log(height);
            if(height>lesson_img_max_height) lesson_img_max_height=height;
        });
        {{--设置图片最大高度--}}
        $(element).each(function () {
            $(this).css({"min-height":lesson_img_max_height});
        });
    }

    // $(function () {
    //     fry_align_img("#lesson_img_box .choose_lesson_imgbox img");
    // });
</script>

{{--
根据不同的屏幕宽度，放到不同的div盒子里面即可

小于768，是2个一组
大于等于768，小于992，是3个一组
大于等于992，是4个一组
--}}
<script>
    let lesson_group_change=false;
    let lesson_group_num=999;//每组的元素

    function put_in_init_group(){
        $(".lesson_box_item").each(function () {
            $("#lesson_img_group_init").append($(this));
        });
    }
    function reset_lesson_img_group(force){
        //先清空group，然后再填数据
        //put_in_init_group();

        let now_width=$(window).width();
        // console.log($(window).width());
        // console.log(document.body.clientWidth);
        // console.log(document.body.offsetWidth);
        // console.log(window.innerWidth);
        // console.log(window.screen.width);
        // console.log($("#lesson_img_group_row").width());

        //785
        if(now_width<768-17){
            if(lesson_group_num!=2) lesson_group_change=true;
            lesson_group_num=2;
        }else if(now_width<992-17){
            if(lesson_group_num!=3) lesson_group_change=true;
            lesson_group_num=3;
        }else{
            //975-991的lesson_group_num都是4
            if(lesson_group_num!=4) lesson_group_change=true;
            lesson_group_num=4;
        }
        let index=0;

        if(lesson_group_change||force==true){
            lesson_group_change=false;
            //console.log("change");
            $(".lesson_box_item").each(function () {
                //console.log($(this));

                //组号
                let group_name_num=parseInt(index/lesson_group_num)+1;
                $("#lesson_img_group_"+group_name_num).append($(this));
                //console.log(index);
                //console.log(group_name_num);
                index++;
            });
        }
    }


</script>

{{--首页不满的组给干掉--}}
<script>
    function hide_notFull_group(){


        let lesson_list_position=window.lesson_list_position;
        let lesson_list_group_max=-999;
        if(lesson_list_position=="home_index"){
            $(".lesson_img_group").each(function () {
                let length=$(this).children().length;
                //console.log(length);
                if(length>lesson_list_group_max)
                    lesson_list_group_max=length;
            });
            //将不满的group干掉
            $(".lesson_img_group").each(function () {
                $(this).css({"display":"block"});
                let length=$(this).children().length;
                if(length<lesson_list_group_max) $(this).css({"display":"none"});
            });
        }
    }

    $(function () {
        reset_lesson_img_group();
        hide_notFull_group();
        $(window).on('resize', function() {
            reset_lesson_img_group();
            hide_notFull_group();
        }).resize();

        //强制
        //reset_lesson_img_group(true);

        setTimeout(function () {
            //再刷一遍，解决下面两种情况的不对
            let now_width=$(window).width();
            if(now_width<768){
                lesson_group_num=2;
            }else if(now_width<992){
                lesson_group_num=3;
            }else{
                lesson_group_num=4;
            }
            let index=0;
            //975-991
            let case1=now_width<=767-17&&now_width>=751-17;
            let case2=now_width<=991-17&&now_width>=975-17;
            if(case1||case2){
                console.log($(".lesson_box_item").length);
                $(".lesson_box_item").each(function () {
                    //组号
                    let group_name_num=parseInt(index/lesson_group_num)+1;
                    $("#lesson_img_group_"+group_name_num).append($(this));
                    console.log(index);
                    console.log(group_name_num);
                    index++;
                });
            }
            hide_notFull_group();
        },200);


    });
</script>