我目前正在使用Masonry制作清单， 这是我的问题...
我有一些不同类型的div内容，
我希望它一次只显示一种类型。
我的方法是在div上应用display:none，并通过javascript过滤掉display:block并对所选的div应用div。
但奇怪的是，在我打电话给Masonry之后，它会让所有可见的$(function() {
let m = $('#masonry');
let item = $('.item');
m.masonry({
itemSelector: '.item',
columnWidth: 0
});
$('#false').on('click', function() {
for(let i = 0; i < item.length; i ++) {
$(item[i]).show();
}
for(let i = 0; i < item.length; i ++) {
if($(item[i]).data('hide') != false) {
$(item[i]).hide();
} else {
$(item[i]).show();
}
}
m.masonry();
})
$('#true').on('click', function() {
for(let i = 0; i < item.length; i ++) {
$(item[i]).show();
}
for(let j = 0; j < item.length; j ++) {
if($(item[j]).data('hide') != true) {
$(item[j]).hide();
} else {
$(item[j]).show();
}
}
m.masonry();
})
$('#pooo').on('click', function() {
for(let i = 0; i < item.length; i ++) {
$(item[i]).show();
}
for(let j = 0; j < item.length; j ++) {
if($(item[j]).data('hide') != null) {
$(item[j]).hide();
} else {
$(item[j]).show();
}
}
m.masonry();
})
})排成一列，这不是我预期的......
这是我的代码：
.item {
padding: 5px;
width: 20%;
}
.inner {
background: pink;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<div id="masonry">
<div class="item">
<div class="inner">
<br><br><br><br><br><br>
</div>
</div>
<div class="item" data-hide="null">
<div class="inner"><br><br><br><br><br></div>
</div>
<div class="item" data-hide="true">
<div class="inner"><br><br><br></div>
</div>
<div class="item" data-hide="false">
<div class="inner"><br><br><br><br><br></div>
</div>
<div class="item" data-hide="true">
<div class="inner"><br><br><br></div>
</div>
<div class="item" data-hide="null">
<div class="inner"><br><br><br><br><br></div>
</div>
<div class="item" data-hide="true">
<div class="inner"><br><br><br><br></div>
</div>
<div class="item" data-hide="false">
<div class="inner"><br><br><br><br></div>
</div>
<div class="item" data-hide="null">
<div class="inner"><br><br><br></div>
</div>
<div class="item" data-hide="false">
<div class="inner"><br><br><br><br><br><br><br><br></div>
</div>
</div>
<button id="false">false</button>
<button id="true">true</button>
<button id="pooo">pooo</button> public void connected() {
lm = (LocationManager) getSystemService(LOCATION_SERVICE);
if (ActivityCompat.checkSelfPermission(this, Manifest.permission.ACCESS_FINE_LOCATION) != PackageManager.PERMISSION_GRANTED && ActivityCompat.checkSelfPermission(this, Manifest.permission.ACCESS_COARSE_LOCATION) != PackageManager.PERMISSION_GRANTED) {
if (ContextCompat.checkSelfPermission(this, android.Manifest.permission.ACCESS_COARSE_LOCATION) != PackageManager.PERMISSION_GRANTED) {
ActivityCompat.requestPermissions((Activity) getApplicationContext(), new String[]{android.Manifest.permission.ACCESS_COARSE_LOCATION},
30);
}
}
location = lm.getLastKnownLocation(LocationManager.GPS_PROVIDER);
if(location != null){
longitude = location.getLongitude();
latitude = location.getLatitude();
altitude = location.getAltitude();
}
final LocationListener locationListener = new LocationListener() {
public void onLocationChanged(Location location) {
}
@Override
public void onStatusChanged(String provider, int status, Bundle extras) {
}
@Override
public void onProviderEnabled(String provider) {
}
@Override
public void onProviderDisabled(String provider) {
}
};
lm.requestLocationUpdates(LocationManager.GPS_PROVIDER, 30000, 500, locationListener);
}
public void getBroadcastData(Intent i) {
longitude = location.getLongitude();
latitude = location.getLatitude();
altitude = location.getAltitude();
Log.d("latitude",String.valueOf(latitude));
Intent intent = new Intent(i);
intent.setAction("com.myapp.LOCATION_CHANGED");
intent.putExtra("latitude",latitude);
intent.putExtra("longitude",longitude);
intent.putExtra("altitude",altitude);
sendBroadcast(intent);
}
有什么建议吗？
答案 0 :(得分：1)
好的，我在评论中的假设是对的，
而Masonry已经有了解决方案，columnWidth。
只需添加一个div，其中我想要的宽度作为columnWidth的值的引用，例如$.masonry({columnWidth: '#theDivWithWidth'})，它应该可以解决问题......
案件结束我认为XD