رفتن به مطلب

هوشمند کردن صفحه اصلی اصلی


پست های پیشنهاد شده

سلام من مطالب جدید سایتم رو به صورت مستطیل هایی که در شکل زیر می بینید

post-412-0-42309000-1353691256_thumb.jpg

قرار داده ام ولی زمانی که یکی از مستطیل ها ارتفاعش از مستطیل های دیگر بیشتر شود , مستطیل بعدی با یک فاصله به اندازه جای یک مستطیل به مکان بعدی می رود که در تصور دوم قابل مشاهده است

post-412-0-26601000-1353691273_thumb.jpg

یا اینکه مانند تصویر زیر زمانی که یک مستطیل ارتفاعش کم شود قاصله ای بین مستطیل با لایی و پایینی بوجود می آید

post-412-0-96651400-1353691239_thumb.jpg

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

لینک به ارسال

این مشکل بخاطر عدم تعیین ارتفاع باکس بصورت پیش فرض هست.

شما بهتره بزرگترین اندازه ارتفاع باکس رو بگیرید و در استایل به باکسهاتون بدید تا همیشه به یک اندازه باشن.

لینک به ارسال

این مشکل بخاطر عدم تعیین ارتفاع باکس بصورت پیش فرض هست.

شما بهتره بزرگترین اندازه ارتفاع باکس رو بگیرید و در استایل به باکسهاتون بدید تا همیشه به یک اندازه باشن.

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

لینک به ارسال

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

به استایل پست ها max-height را اضافه کن و مقدارش را با height برابر کن

به همان استایل اضافه کن


overflow:hidden

در مورد انتخاب عنوان سئوال هم بیشتر دقت کن

لینک به ارسال

به استایل پست ها max-height را اضافه کن و مقدارش را با height برابر کن

به همان استایل اضافه کن


overflow:hidden

در مورد انتخاب عنوان سئوال هم بیشتر دقت کن

کار هایی رو که گفتید رو انجام دادم اما زمانی که ارتفاع پست زیاد می شود مطالب و .. به زیر می روند و دیگر پیدا نیستند .

این کار جکجورایی مسئله رو پاک کردن هست من می خواهم تا به صورت خودکار زمانی که یک پست ارتفاعش کم هست پست بعدی بالاتر آید و فاصله ای بین دو پست ایجاد نشود و بلعکس زمانی که ار تفاع پستی زیاد می شود پست بعدی به اندازه ارتفاعی که پست بلندتر پایین آمده است پایین برود و باز فاصله بین پست ها یکسان بماند

لینک به ارسال

این برگه رو نگاه کنید


http://stackexchange.com/sites?view=grid

می بینید که اندازه باکس ها متفاوت هست اما فاصله بین باکس ها ثابت است و به صورت آنلاین اندازه باکس ها تغییر می کند تا فاصله ای میان باکس ها ایجاد نشود و جای خالی وجود نداشته باشد.

لینک به ارسال

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

چیزی که شما می خواهی اصلا با دستور float انجام نمی شود شما می توانی دستور


-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

را به استایل لایه ی اصلی که همه پست ها در آن هستند (بیرون حلقه ) اضافه کنی ولی ترتیب نمایش بجای کنار هم می شود زیر هم

یعنی مثلا برای 9 مطلب خواهی داشت

مطلب اول + مطلب چهارم + مطلب هفتم

مطلب دوم + مطلب پنجم + مطلب هشتم

مطلب سوم + مطلب ششم + مطلب نهم

لینک به ارسال

سایتی که لینک دادید هم اینطور نیست که کادرها با هر اندازه ای باشند

هر کادر در دو کلاس تعریف شده و اندازه اش کاملا مشخص است فقط با یک دستور جاوا اسکریپت کلاس ها از یک به دو تغییر می کند


document.getElementById('PostID').className='Class2'

و جی کوئری


<script>
$("#postID").click(function () {
$(this).toggleClass(".class2");
});
</script>

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...