b523db2bbea7098aeccea0f78f41f223
     
     
     
    
    
    
    
    
    
    
 
تقنية و أشياء أخرى
تقنية و أشياء أخرى
مختلف المقالات و النقاشات و الروابط المتعلقة بالتقنية او المواضيع العامة
                         عربي     English

مشكلة فى إستخدم masonry.js
   محمد جمال الذياب        08-02-2020  
   khashabawy - عبدالله خشبة   
السلام عليكم ورحمة الله
بلجن masonry.js يستخدم لتوليد واجهات تحتوى على عناصر غير متساوية الإرتفاع
قمت بإدراجه فى مشروعى لأصمم به واجهة رئيسية و لكن للأسف واجهتنى مشكلة أنه يوجد فجوات بين العناصر مثلما هو موضح فى الصورة
هل من مساعده ؟
للعلم هذا هو الكود المستخدم :
 
<script src="http://localhost/test/assets/masonry/jquery.masonry.min.js"></script>
<script>
$('#masonry').masonry({
itemSelector: '.single_home_item',
columnWidth : 340,
isResizable:true,
isRTL:true,
containerStyle: { position: 'relative' },
gutterWidth:10,
isFitWidth:true
});
</script>

التعليقات
   خالد الحضري   
وعليكم السلام أخي عبد الله
ما دمت تستخدم مكتبة الـ JQuery فـ
 
$("document").ready( function() {
ضع الكود هنا
});


طبعا قمت مسبقا باستدعاء ملف الـ JQuery ؟
وسيعمل بإذن الله :)
 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<script>
$("document").ready( function() {
$('#masonry').masonry({
itemSelector: '.single_home_item',
columnWidth : 340,
isResizable:true,
isRTL:true,
containerStyle: { position: 'relative' },
gutterWidth:10,
isFitWidth:true
});
});
</script>
<style>
.single_home_item{
background: #f1f1f1;
border-bottom:5px solid #ddd;
padding:10px;
width: 300px;
margin: 10px;
float: right;
}
</style>
<div class="container" id="masonry">
<div class="single_home_item">*<br /><br /><br /><br />*</div>
<div class="single_home_item">*<br /><br />*</div>
<div class="single_home_item">*<br /><br /><br /><br />*</div>
<div class="single_home_item">*<br /><br />*</div>
<div class="single_home_item">*<br /><br /><br />*</div>
<div class="single_home_item">*<br /><br />*</div>
<div class="single_home_item">*<br />*</div>
<div class="single_home_item">*<br /><br /><br /><br />*</div>
<div class="single_home_item">*<br />*</div>
</div>

   khashabawy - عبدالله خشبة   
بالفعل هذا حل المشكلة , شكراً جزيلاً أخى خالد
   khashabawy - عبدالله خشبة   
CSS :
 
.single_home_item{
background: #f1f1f1;
border-bottom:5px solid #ddd;
padding:10px;
width: 320px;
margin: 10px;
float: right;
}


HTML :
 
<div class="container" id="masonry">
<div class="single_home_item">
<h1>عنصر من عناصر الصفحة الرئيسية</h1>
<h3> وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
</h3>
</div>

<div class="single_home_item">
<h1>عنصر من عناصر الصفحة الرئيسية</h1>
<h3> وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
</h3>
</div>
</div>

   khashabawy - عبدالله خشبة   
الصورة :
http://oi59.tinypic.com/2lszcb8.jpg
   Anasjber - أنس تمام   
لم أستطيع حل مشكلة الفجوات بواسطة إضافة masonry.js لذلك إستعنت بـ CSS لتلبية طلبك:
CSS
 
#masonry {
-moz-column-count:3;
text-align:right;
direction:rtl;
}
.single_home_item{
background: #f1f1f1;
border-bottom:5px solid #ddd;
padding:10px;
width: 320px;
margin: 10px;
display:inline-block;
}


HTML

 
<div class="single_home_item">
<h1>عنصر من عناصر الصفحة الرئيسية</h1>
<h3> وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
</h3>
</div>

<div class="single_home_item">
<h1>عنصر من عناصر الصفحة الرئيسية</h1>
<h3> وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
</h3>
</div>
<div class="single_home_item">
<h1>عنصر من عناصر الصفحة الرئيسية</h1>
<h3> وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
</h3>
</div>
<div class="single_home_item">
<h1>عنصر من عناصر الصفحة الرئيسية</h1>
<h3> وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
</h3>
</div>
<div class="single_home_item">
<h1>عنصر من عناصر الصفحة الرئيسية</h1>
<h3> وصف عنصر من عناصر الصفحة الرئيسية
عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
</h3>
</div>
<div class="single_home_item">
<h1>عنصر من عناصر الصفحة الرئيسية</h1>
<h3> وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
</h3>
</div>
<div class="single_home_item">
<h1>عنصر من عناصر الصفحة الرئيسية</h1>
<h3> وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة
</h3>
</div>
<div class="single_home_item">
<h1>عنصر من عناصر الصفحة الرئيسية</h1>
<h3> وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
وصف عنصر من عناصر الصفحة الرئيسية
</h3>
</div>


http://i.imgur.com/YHo97y3.png
   khashabawy - عبدالله خشبة   
ولكن ذلك عن طريق إستخدام inline block و ليس float
و هو مالا يجدى فى حالة عمل تحميل المزيد عبر ajax
   Anasjber - أنس تمام   
اها، للأسف خبرتي بالجافاسكربت والاجاكس ضعيفه :(.
لكن ربما تكون المشكلة هنا:
http://i.imgur.com/sRyGdD8.png
  الموضوع و التعليقات و باقي البيانات في هذه الصفحة منقولة و معدلة من المصدر على الرابط التالي : https://io.hsoub.com/webdev/7155
  هذا الموضوع مرخص تحت : رخصة المشاع الإبداعي BY-SA
المشاركة :
تويتر
فيسبوك
الإيميل
لينكد إن
واتساب
الرابط

أتمنى رأيكم بخصوص هذا السكربت المتواضع أتمنى رأيكم بخصوص هذا السكربت المتواضع
إسألني أي سؤال عن الافلام وسأجيبك إسألني أي سؤال عن الافلام وسأجيبك
توقف عن البحث عن شغفك؛ فأنت ليس لديك شغف! توقف عن البحث عن شغفك؛ فأنت ليس لديك شغف!
مكتبة Together.js من موزيلا تحول أي موقع إلى ساحة مشاركة مكتبة Together.js من موزيلا تحول أي موقع إلى ساحة مشاركة
قدرة إتاحة التواصل بين المستقل وصاحب العمل بعد إنهاء فترة المشروع؟ قدرة إتاحة التواصل بين المستقل وصاحب العمل بعد إنهاء فترة المشروع؟
هل يمكنني برمجة تطبيقات الاندرويد على نظام ios ؟ هل يمكنني برمجة تطبيقات الاندرويد على نظام ios ؟
لقد قمت بعمل Custom checkbox and radio buttons v2 - jquery plugin لقد قمت بعمل Custom checkbox and radio buttons v2 - jquery plugin

الروابط المختصرة    سياسة الخصوصية    شروط الإستخدام    من أنا    من نحن    الأسئلة الشائعة    موضوع عشوائي    اتصل بنا   
                           
Developed by : MJ7.org