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-width: 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-width: 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;width: 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>