1
사용자 기기의 방향이 변경된 후에 해당 div 안에있는 크기가 조정 된 요소의 크기를 기반으로 일부 div 요소 높이를 변경하고 싶습니다. 기본적으로 이미지 및 기사 제목의 반응이 좋은 목록입니다. 높이는 페이지가 처음로드 될 때 정확하지만 방향 변경시 잡은 높이가 정확하지 않습니다. 나는 지난 날이 일로 어려움을 겪어왔다. 어떤 생각이라도 대단히 감사하겠습니다.jQuery 방향 변경시 div의 높이()가 올바르지 않습니다.
HTML
<div id="mn_category_list_container">
<div class="mn_category_post mn_post_1" style="height: 283px;">
<li>
<a href="#" class="ui-link" data-ajax="false">
<img class="mn_img" src="http://baconmockup.com//144/128">
<h2>Title 1</h2>
</a>
</li>
</div>
<div class="mn_category_post mn_post_2 right_post" style="height: 283px;">
<li>
<a href="#" class="ui-link" data-ajax="false">
<img class="mn_img" src="http://baconmockup.com//144/128">
<h2>Title 2</h2>
</a>
</li>
</div>
<div class="mn_category_post mn_post_3" style="height: 283px;">
<li>
<a href="#" class="ui-link" data-ajax="false">
<img class="mn_img" src="http://baconmockup.com//144/128">
<h2>Title 3</h2>
</a>
</li>
</div>
<div class="mn_category_post mn_post_4 right_post" style="height: 283px;">
<li>
<a href="#" class="ui-link" data-ajax="false">
<img class="mn_img" src="http://baconmockup.com//144/128">
<h2>Title 4</h2>
</a>
</li>
</div>
하는 SCS
#mn_category_list_container {
@include cf;
.mn_category_post {
float:left;
width: 48%;
margin-bottom: 23px;
li {
list-style-type: none;
a {
text-decoration: none;
img {
margin-bottom: 5px;
}
}
}
}
.right_post {
float: right;
width: 48%;
}
}
JS (임 jQuery를 모바일을 사용하여주의, 난 내가 그렇게를 사용하여 않네 아약스 링크 같은이 물건의 일부를 해제했다 여기에 코드와 함께 입력하십시오.)
var MN = MN || {};
(function($) {
// MOBILE SPECIFIC FUNCTIONS
MN.MOBILE = {
// Assigns heights to lis so rows (2 posts per) are even heights
catPostHeighterer: function() {
elementHeights = $('.mn_category_post li').map(function() {
return $(this).outerHeight();
}).get();
maxHeight_row1 = Math.max(elementHeights.slice(0,1), elementHeights.slice(1,2));
maxHeight_row2 = Math.max(elementHeights.slice(2,3), elementHeights.slice(3,4));
$('.mn_post_1, .mn_post_2').css('height', maxHeight_row1);
$('.mn_post_3, .mn_post_4').css('height', maxHeight_row2);
},
imageResizerer: function() {
viewport = updateViewportDimensions();
img_width = $('.mn_category_post').width(); // width based on the width of is css class, which is defined in code as % of window width
img_height = Math.round(img_width * .89); // ratio of width to height based on designs
$(".mn_img").attr('src', "http://baconmockup.com//" + img_width + "/" + img_height);
},
init: function() {
MN.MOBILE.imageResizerer();
$(window).load(function() {
MN.MOBILE.catPostHeighterer();
});
$(window).on("orientationchange",function(){
MN.MOBILE.imageResizerer();
MN.MOBILE.catPostHeighterer();
});
// disable jQuery Mobile's ajax stuff
$('a').attr('data-ajax','false');
$(document).bind("mobileinit", function(){
//apply overrides here
$.mobile.loadingMessage = false;
});
}
}
})(jQuery);
jQuery(document).ready(function($) {
if (viewport.width <= 783) {
MN.MOBILE.init();
}
});
이미 시도한 것 - 내 js에서 height() 대신 outerHeight()를 사용하여 이미지 크기 조정 및 카테고리 높이 크기 조정 시간 제한 설정. 목록 항목 (mn_category_post)의 포함 div를 가져 와서 크기를 지정합니다. orientationchange 대신에 resize를 사용합니다. jquery를 전혀 사용하지 않습니다. 나는 아이디어가 없다. 미리 감사드립니다.