javascript - Masonry with full-width items - Stack Overflow

admin管理员组

文章数量:1406926

I am having an issue with Masonry where if I need one element to be 100% width and the rest to be 50% width, the layout no longer puts my elements adjacent to each other. What I would like is for the items to show up side-by-side like they do when there is no 100%-width element.

Here's a js fiddle: /

    <div id="boxes" class="masonry clearfix">
    <div class="box box-fw" style="background: cyan;">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box" style="background: magenta;">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box" style="background: yellow;">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box" style="background: grey;">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
</div>

.box{
    width: 50%;
    box-sizing:border-box;
}

.box-fw{
   width:100%
}

    $(function(){
    var container = $('#boxes');

    container.imagesLoaded(function(){  
        //console.log( "Images loaded!" );
        container.masonry({
           itemSelector: '.box',
            isAnimated: true
        });
    });
});

I am having an issue with Masonry where if I need one element to be 100% width and the rest to be 50% width, the layout no longer puts my elements adjacent to each other. What I would like is for the items to show up side-by-side like they do when there is no 100%-width element.

Here's a js fiddle: https://jsfiddle/ubmf47s4/2/

    <div id="boxes" class="masonry clearfix">
    <div class="box box-fw" style="background: cyan;">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box" style="background: magenta;">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box" style="background: yellow;">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box" style="background: grey;">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
</div>

.box{
    width: 50%;
    box-sizing:border-box;
}

.box-fw{
   width:100%
}

    $(function(){
    var container = $('#boxes');

    container.imagesLoaded(function(){  
        //console.log( "Images loaded!" );
        container.masonry({
           itemSelector: '.box',
            isAnimated: true
        });
    });
});

• javascript
• css
• masonry

Share Improve this question Follow edited May 30, 2016 at 4:53 Maximillian Laumeister 20.4k1010 gold badges6262 silver badges8383 bronze badges asked May 26, 2016 at 5:06 AndresAndres 2,02366 gold badges4242 silver badges7070 bronze badges 1

• 1 What stops working all together? At 100% of width, there shouldn't be any masonry effect? Could you at least provide the image of the layout that you visioned or have in mind? – user900360 Commented May 30, 2016 at 4:10

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5 +200

Masonry requires a columnWidth to determine the width of the columns for it to lay out your content in, which can either be a direct pixel value or a selector for an element to measure. Since columnWidth is not specified in your code, Masonry defaults to measuring the first element in your masonry container to establish the column width. Since your first element is the one with 100% width, Masonry measures it and sets your column width to 100%, which is why your 50%-width elements no longer show up side-by-side (your entire masonry layout is effectively a single column).

More about this behavior in the Masonry docs for columnWidth.

---

One way to fix this is to specify an element that Masonry can measure to establish your column width - in this case I've used an element with the class column-sizer, which I've sized at 50% using CSS. Masonry then measures this element to determine the column size for layout. I borrowed the technique from David Desandro's fluid columnWidth CodePen example.

Screenshot of Result:

Working Live Demo:

$(function() {
  var container = $('#boxes');

  container.imagesLoaded(function() {
    //console.log( "Images loaded!" );
    container.masonry({
      itemSelector: '.box',
      columnWidth: '.column-sizer',
      isAnimated: true
    });
  });
});

html,
body {
  margin: 0;
}
.box,
.column-sizer {
  width: 50%;
  box-sizing: border-box;
}
.box-fw {
  width: 100%;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn./[email protected]/dist/masonry.pkgd.min.js"></script>
<script src="https://npmcdn./[email protected]/imagesloaded.pkgd.min.js"></script>

<div id="boxes" class="masonry clearfix">
  <div class="column-sizer"></div>
  <div class="box box-fw" style="background: cyan;">
    <div class="inner">
      <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p>
    </div>
  </div>
  <div class="box" style="background: magenta;">
    <div class="inner">
      <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p>
    </div>
  </div>
  <div class="box" style="background: yellow;">
    <div class="inner">
      <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p>
    </div>
  </div>
  <div class="box" style="background: grey;">
    <div class="inner">
      <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p>
    </div>
  </div>
</div>

JSFiddle Version: https://jsfiddle/x9mf2c6x/

本文标签： javascriptMasonry with fullwidth itemsStack Overflow