jquery 布局

jQuery 布局基础

jQuery 提供多种方法辅助页面布局调整，包括 DOM 操作、样式修改和动态计算。以下是常用布局技术：

动态调整元素尺寸
通过 width() 和 height() 方法获取或设置元素尺寸，支持数值或百分比：

$('#element').width(500);  // 设置宽度为500px  
$('#element').height('50%'); // 高度设为父元素的50%  

定位与偏移
使用 offset() 获取元素相对于文档的位置，position() 获取相对于父元素的位置：

var pos = $('#element').offset();  
console.log(pos.top, pos.left); // 输出坐标  

响应式布局实现

结合 CSS 媒体查询与 jQuery 动态适配屏幕尺寸：

$(window).resize(function() {  
    if ($(window).width() < 768) {  
        $('#sidebar').hide();  
    } else {  
        $('#sidebar').show();  
    }  
});  

网格与等高列

通过遍历元素统一高度实现等高效果：

var maxHeight = 0;  
$('.column').each(function() {  
    maxHeight = Math.max(maxHeight, $(this).height());  
}).height(maxHeight);  

动画布局过渡

使用 animate() 实现平滑布局变化：

$('#panel').animate({  
    width: 'toggle',  
    opacity: 0.5  
}, 1000);  

插件增强布局

• Masonry：瀑布流布局插件，需引入额外库。
• Gridster：拖拽网格系统插件。

示例初始化 Masonry：

$('.grid').masonry({  
    itemSelector: '.grid-item',  
    columnWidth: 200  
});  

通过结合原生 jQuery 方法和插件，可高效实现复杂布局需求。