(jQuery)همسان‌سازی ارتفاع المان‌های هم‌سطح بوسیله جاوا اسکریپت

یکی از مواردی که در ساخت و اجرای رابط کاربری با آن مواجه می‌شویم تفاوت ارتفاع المان‌های هم‌سطح و یا هم خانواده (Siblings) می‌باشد. این حالت هنگامی که لیستی از موارد را بصورت گرید نمایش می‌دهیم خود را نشان می‌دهد. به این شکل که المان‌ها با ارتفاع متفاوت باعث بر هم خوردن چیدمان کلی آن‌ها می‌شود. مانند تصویر زیر:

هم‌سان سازی المان‌های هم سطح با استفاده از جاوااسکریپت

ساختار مورد نیاز برای این روش

الگوریتم کلی برای این روش به زبان ساده به این شکل است که ارتفاع بزرگترین آیتم را پیدا میکنیم و به بقیه آیتم‌های هم‌خانواده اعمال می‌کنیم. در نگاه اول این روش بسیار ساده و سریع خواهد بود ولی یک نکته ریز و بسیار حساس در آن نهفته است. اگر ما ارتفاع بزرگترین آیتم را از خود المان والد(parent) بدست آوریم و به خود آن‌ها اعمال نماییم در لود اولیه درست کار خواهد کرد ولی به محض تغییر سایز مرورگر بدلیل اینکه ارتفاع المان‌های parent هم اندازه هستند دیگر تغییری در آنها اتفاق نخواهد افتاد و المان‌های فزرند با تغییر اندازه اگر بزرگتر از parent باشند overflow خواهند شد و ظاهر و ساختار چیدمان به هم خواهد ریخت.

برای جلوگیری از این اتفاق ما باید یک المان اضافه درون parent اصلی و فقط جهت محاسبه مجموع ارتفاع فرزندان ایجاد نماییم. پس ما یک المان داخلی داریم که ارتفاع فرزندان را به ما برمی‌گرداند و یک المان خارجی یا همان parent که بزرگترین ارتفاع بدست آمده به آن اعمال می‌شود.

ساختار ما می‌تواند به شکل زیر باشد:

<div class="parent outer">
    <div class="inner">
      <div class="image"></div>
      <div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    </div>
  </div>

 

خب شروع کنیم

حالا می‌خواهیم با استفاده از jQuery ازتفاع آن‌ها را هم سان کنیم. برای شروع لازم است که بزرگترین ارتفاع را پیدا نماییم:


// find the highest element
var maxHeight = 0;
$('.parent').each(function(){
    var _thisHeight = $(this).find('.inner').outerHeight();
    if(_thisHeight > maxHeight)
    {
        maxHeight = _thisHeight
    }
});

خب حالا ما اندازه بزرگترین ارتفاع را داریم و وقت آن است تا طبق نقشه آن را به outer اعمال نماییم:


// match height all elements
// we should add element paading to maxHeight
$('.parent.outer').css('height', maxHeight + 40);

نباید فراموش کنیم که Padding اصلی را به بزرگترین ارتفاع اضافه نماییم، چرا که ارتفاع بدست آمده فقط مجوع المان‌های داخلی است.

خب تقریبا به آخر کار نزدیک شدیم. آیتم‌های ما همگی یک ارتفاع یکسان دارند و همه چیز درست کار میکند ولی یک مورد را فراموش کرده‌ایم، اگر سایز مرور گر یا اسکرین ما تغییر کند چطور؟ کد jQuery ما هنوز نمی‌تواند در هنگام تغییر سایز، عملیات پیدا کردن ارتفاع بلندتر را انجام دهد. برای این منظور باید همه کدها را داخل تابع window resize قرار دهیم تا با هر تغییر عملیات انجام شود:


$(window).on('load resize',function(){
    // our codes here...
});

خب خروجی نهایی ما به شکل زیر خواهد بود:

See the Pen jQuery match height by Hossein (@hossein84) on CodePen.

  • صدرا 2018/10/15

    اگر برای پلاگین استفاده بشه باید به عنوان call back گذاشته بشه نه روی وینوز لود یا ریسایز فک کنم

    • حسین حاجی مالی 2018/10/15

      بله درسته،‌در حالتی که المان‌های تحت تاثیر یک پلاگین قرار هست همسان بشن، باید بعد از لود شدن کامل پلاگین یا داخل callback جاوااسکریپت ما قرار داده شود. ممنون از نکته خوبی که بهش اشاره کردین :)

  • امیرحسین 2018/10/17

    خب به جای اینها از خود css استفاده میکردید اون هم با یک دستور display:flex برای والد این آیتم ها

    • حسین حاجی مالی 2018/10/17

      بله درسته، با flex میشه این کار رو انجام داد. هدف این مطلب پیاده سازی این اتفاق با استفاده از jQuery هست.

نظر شما چیست؟
فرم شما با خطا مواجه شده است:
    با تشکر. نظر شما با موفقیت ثبت شد و پس از تایید مدیریت نمایش داده خواهدشد.