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>